[ES] NextBlok: Tutorial página web profesional con Next.js y Storyblok - Introducción
Tags: storyblok, nextjs, react, tutorial
Published: 2023-04-13 04:14:41

Hola a todos,

## TL/DR
A través de esta serie de publicaciones aprenderemos a crear un sitio web rápido, accesible, full-SEO y multi-idioma usando Storyblok, Next.js y otras tecnologías web modernas; así como buenas prácticas, metodologías y arquitecturas (JAMStack).

---

## Introducción

En esta serie de publicaciones vamos a aprender a crear un sitio web "profesional" desde 0 con múltiples tecnologías de la web moderna.

Los conocimiento mínimos para seguir esta serie publicaciones sin problemas son:

- Conocimiento en HTML, CSS y Javascript, no a un nivel muy avanzado pero sí con cierta experiencia.
- Conocimientos básicos de WEB, como APIs, Verbos HTTP, AJAX, etc.
- Conocimientos básicos de infraestructura en tecnología.

---

## Objetivo principal

El objetivo de esta serie de publicaciones es introducirnos en el desarrollo de sitios web ágiles y en el mundo del headless, no necesariamente volvernos unos expertos pero sí tener la idea de cómo se puede llevar a cabo un desarrollo web profesional de esta índole.

Crearemos un sitio web "estático" (generado con SSG) rápido y administrable que culpla con los requerimientos típicos del desarrollo web actual, y a medida que vayamos expandiendo el mismo ir profundizando en otros temas como comercio, búsquedas personalizadas, recomendaciones, etc.

---

## Tecnologías

Las principales tecnologías a usar en este tutorial son las siguientes:

### Next.js

![Next.js logo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zzwcrmnbpn850zuav33r.png)

Framework para la creación/desarrollo de sitios/aplicaciones web con reactjs como biblioteca principal para construcción de interfaces; con múltiples características que nos ayudarán a tener sitios web rápidos, escalables, amigables y accesibles.

[Conoce más.](https://nextjs.org/)

### Storyblok

![Storyblok logo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/krxzy8zd63iduilxtd1e.png)

Headless CMS con editor visual para la administración y distribución de contenido por medio de API's REST y GraphQL; este cuenta con previsualización, manejo de contenid por árbol, richtext, roles, flujos de trabajo, entro otras características que nos ayudara a crear estructuras de contenido de manera fácil y rápida.

[Conoce más.](https://www.storyblok.com/)

### Tailwindcss

![Tailwindcss logo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/czioixqz5346hb27ietu.png)

Podríamos llamarlo framework (como su sitio oficial lo dicta) o simplemente una librería CSS/JS que nos ayuda a crear e implementar interfaces de manera rápida y óptima en el sentido de generar un build con solo lo que usaremos.

[Conoce más.](https://tailwindcss.com/)

### Vercel

![Vercel logo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qshrdso04cwolh3e21f9.jpg)

Plataforma como servicio (PaaS) unificada en la nube que permite a los desarrolladores desplegar, gestionar y escalar sus aplicaciones y sitios web de manera fácil y cómoda.

[Conoce más.](https://vercel.com/)

Además de las tecnologías ya mencionadas, expandíremos nuestro proyecto en una eta "final" con otras integraciones tales como [algolia](https://www.algolia.com/es/), [storybook](https://storybook.js.org/), [commercelayer](https://commercelayer.io/), etc.

---

> **Disclaimer**: Mis conocimientos actuales y mis desconocimientos y dificultad de encontrar manuales/tutoriales para este stack en el pasado me llevaron a escribir esta serie de tutoriales; tengo cierta experiencia, pero como cualquier persona puedo errar y/o tener equivocaciones en lo que escriba por lo que pido por favor si encuentran algún fallo en lo que publique me lo hagan saber. Mi objetivo, además de ayudar a quien a penas comienza, también es profundizar y afianzar muchos conocimientos en mi experiencia.

> **Nota:** esta serie de manuales se irán traduciendo al inglés a medida que vaya publicando los mismos.

Nos vemos en la siguiente publicación. Si tienen alguna corrección, queja, duda, sugerencia, estaré bien atento.

Saludos.