Como crear una pagina con NextJS y Sanity

Este tutorial (esta en work in progress ya que es largo y quiero cubrir bien todos los temas para que cualquiera pueda crear un sitio desde 0 con estas tecnologías), esta pensado en personas que tienen ciertos conocimientos en HTML / Javascript (al menos básicos).

Antes de avanzar en el tutorial, les comento por que recomiendo NextJS; es que este framework basado en React, tiene la flexibilidad y dinamicidad de React, con la particularidad de que las páginas se renderizan del lado del servidor, a una velocidad increíble, logrando una gran experiencia de usuario y además al cargar el contenido casi de manera instantánea, mejora la performance de la pagina en los buscadores o mejor dicho, Google.

El contenido de este tutorial, va a ser el siguiente:

• Estructura de NextJS.
• Configuración de NextJS con NPX.
• Configuración de TailwindCSS
• Configurar Sanity Studio.
• Armado de Schemas.
• Queries con GROQ.
• Armar una sección interna con datos dinámicos.
• Trabajar con Layouts.
• Armar la Home.
• Trabajar con Componentes.
• Generar paginas estáticas.
• Hacer un Deploy.
• Configurar Dominio en Vercel.

Requerimientos:

• Tener Nodejs Instalado. (sino lo tenes, seguí estos pasos)
• Tener Visual Studio Code Instalado. (Podes usar otro, pero este esta integrado con la terminal, es gratuito y resulta muy practico. Descargar aqui.)
• Tener una cuenta en Github. (aquí vamos a crear el proyecto y hacer una integración continua junto con Vercel).
• Tener una cuenta en Vercel. (existe la opción gratuita - Registrarse aqui). Vercel es la plataforma donde serviremos el sitio.
• Tener una cuenta en Sanity.io (Este es el Headless CMS, nos permite configurar esquemas de informacion, tiene una opción gratuita si no superas los limites de transferencia. Registrarse aqui).

Estructura de NextJS.

Next.js esta basado en React, como tal, tiene similitudes en cuanto a estructura de código. Lo mas destacado, es que el código que va a ser servido de manera estática (post-compilación) es que se trabaja en la carpeta "pages". Dentro de esta vamos a armar la estructura de directorios de la pagina y vamos a trabajar con urls y files dinámicos. Un ejemplo sencillo y claro es:

• pages/
  • products/
    • [slug].js

Donde [slug] se va a transformar en el nombre del producto. Logrando que la URL quede: misitio.com/products/iphone-13

Lo cuál, además de ser mas legible y que una persona pueda escribir la URL si problemas, tiene la palabra clave en la URL lo que ayuda al posicionamiento web.

Configuración NextJS

Antes de avanzar con la configuración, vamos a crear un proyecto en github y luego lo vamos a clonar en nuestro directorio local utilizando Visual Studio Code.

Creación de Repositorio en Github

Para hacer esto, tenemos que ir a github.com, loggearnos con nuestro usuario y contraseña y generar un nuevo proyecto.

Una vez que cliqueamos en NEW, vamos a asignar un nombre al repositorio y luego chequeamos la opcion de agregar un Readme y Gitignore (esto ayudara a no subir archivos indeseados al repositorio).

Clonar repositorio en mi computadora

Al ya tener el repositorio creado, vamos a tener una dirección del repositorio en github, similar a: github.com/miusuario/miproyecto.

Ahora, vamos a copiar la dirección del repositorio, haciendo click en el botón "Code". Y desde la pestaña de HTTPS copiamos la URL que figura.

Abrimos el Visual Studio Code y en la Terminal, nos vamos a ubicar en la ruta donde vamos a crear el proyecto, en mi caso (trabajo con Mac), los proyectos los tengo en: /Users/juliochamizo/Desktop/Webs/

Por lo tanto, te recomiendo que vayas a tu "root" de proyectos y ahi, sin crear una nueva carpeta, hagas el CLONE de tu proyecto en GitHub. Esto lo que va a hacer es generar una carpeta con el nombre de tu proyecto.

Para Abrir la Terminal, en el menú superior del VSCode van a encontrar la opción de "Terminal":

Esto va a abrir un módulo con la terminal por debajo del lugar donde vamos a escribir el código.

Aquí, entonces, vamos a ir a nuestro root y luego vamos a escribir lo siguiente:

git clone https://github.com/miusuario/mirepositorio y luego le dan ENTER.

Lo que va a pasar, es que se van a descargar todos los archivos que generamos desde github en nuestro local.

Ahora, manos a la obra! Pero antes...

Comandos generales útiles para manejarse en la terminal:

Para quienes son diseñadores y no tienen tantas horas con los comandos en la terminal, les dejo unos tips útiles:

cd <nombre de carpeta>

(change directory, significa que cambias de directorio, siempre relativo a donde te encuentres)

mkdir <nombre>

(make directory, genera un nombre de carpeta, relativo a donde te encuentres)

cd ..

(vas un paso detrás del actual directorio).

ls

(lista el contenido de un directorio)

pwd

(muestra la ruta absoluta de donde te encuentras ahora)

touch <nombre.extensión>

(te genera un archivo vacío con la extensión que definas).

Comandos de GIT útiles.

git clone <repo url>

(para clonar un repositorio)

git pull

(para traer lo ultimo de un repositorio)

git add .

(para versionar nuevos files y modificados)

git commit -m "comentario de la modificación trabajada"

(para commitear los ultimos cambios)

git push

(para enviar los cambios a la nube de Github)

NPX create-next-app

Llegó el momento de meter mano en el código y armar la pagina que queremos. Para eso, vamos a usar el comando NPX de Node, que nos generará un "template" del código que necesitamos para armar nuestro sitio en Next.js.

Para aprender más sobre NEXT, les recomiendo seguir este link.

Antes de ejecutar el siguiente comando, vayan un paso anterior al repositorio recien descargado para que al generar el create-next-app al generar el nombre sea el mismo del repositorio, asi se instala en ese lugar:

npx create-next-app@latest

Esto, lo que hace es crear una aplicación en Next con la ultima versión estable del framework. Aquí tenemos que elegir el nombre del proyecto, que sea igual al del repositorio. Como todavía no tenemos archivos que comprometan o pisen algo sensible, no pasa nada y podremos continuar con la instalación.

Además, vamos a agregar TailwindCSS. Si quieren saber mas, les dejo la documentación.

npm install -D tailwindcss postcss autoprefixer

npx tailwindcss init

Una vez que ejecutaron estos dos comandos, Vamos a configurar el archivo tailwind.config.js generado en la carpeta principal y agregamos el siguiente codigo:

module.exports={
content:["./src/**/*.{html,js}"], theme:{ extend:{},}, plugins:[],
}

También modificamos el PostCSS (postcss.config.js) que ayudará a renderizar los styles a la hora del build, lo que ahorra muchísimo tiempo.

module.exports={
plugins:{ tailwindcss:{}, autoprefixer:{},}
}

Luego, confguramos el archivo ubicado en el proyecto /styles/global.css

@tailwind base;@tailwind components;@tailwind utilities;

Ejecutando el comando RUN DEV, ya podríamos ver la pagina por default que viene.

npm run dev

Una vez que tenemos esto generado, ya estamos listos para instalar Sanity.io y luego plantear el esquema de datos que tendrá la pagina. Para eso, vamos a instalar el cliente de Sanity.io para la terminal. Pero antes de esto, hay que registrarse y loggearse con Sanity, recomiendo que usen el registro con Github, asi queda todo unificado. Una vez loggeados, ejecutar en la terminal:

npm install -g @sanity/cli