Saga de Next.js de Platzi

https://platzi-plantpedia.vercel.app

Este repositorio recopila el proyecto de la Saga de Next.js dictado por @jonalvarezz para Platzi. Los cursos que componen la saga son:

• Curso de Next.js: Sitios Estáticos y Jamstack
• Curso de Next.js: Internacionalización de Aplicaciones Web con i18n
• Curso de Next.js: Deploy a Producción
• Curso de Next.js: Grandes Datasets
• Curso de Next.js: Autenticación
• Curso de Next.js: Seguridad con OWASP

Tabla de contenidos

• 🔎 ¿Cómo trabajar en este proyecto?
• 🤖 Guía rápida de desarrollo
• ⚙️ Importar contenido a Contentful
• 🧑‍🏫 Otras preguntas y respuestas
• 🐞 ¿Encontraste un error o mejora?

🔎 ¿Cómo trabajar en este proyecto?

El curso es totalmente práctico y progresivo. Este repositorio sólo existe como una guía para cuando lo necesites. Puedes realizar todo el curso en tu propio proyecto y tu propio repositorio.

El repositorio y toda la saga está dividido por etiquetas de Git. Empieza desde la etiqueta git correspondiente al módulo del curso que te interese:

1. Clona el repositorio, si no lo has hecho aún:

   git clone [email protected]:jonalvarezz/platzi-plantpedia.git

2. Actualiza la información de las etiquetas:

   git fetch --tags

3. Lista las etiquetas disponibles:

   git tag

   Deberías ver algo como:

   0-inicio
   1-incremental-rendering
   10-react-query
   11-memoization
   ...

4. Inicia un nuevo branch desde el punto que desees:

   git checkout -b el-nombre-de-mi-branch etiqueta-elegida
   
   # Por ejemplo, para crear un branch llamado 'dev' desde el módulo '10-react-query'
   git checkout -b dev 10-react-query

   🔥 Eso es todo, ya puedes iniciar con todos los cambios incluídos hasta ese módulo.

   💡 En la sección de Releases puedes encontrar toda la lista de etiquetas.

¿Cómo subo mis cambios a otro repositorio?

Git permite manejar varios repositorios remotos en una misma copia local. Aquí encuentras más información y te dejaré el cheatsheet a continuación:

# Crea tu nuevo repositorio en GitHub/GitLab/otro. 
# Asumamos la URL es [email protected]:jonalvarezz/mi-repo-mas-bello.git
# Agrega el nuevo remote

git remote add mi-repo [email protected]:jonalvarezz/mi-repo-mas-bello.git

# Para push
git push mi-repo branch-a-hacer-push


# Para pull
git pull mi-repo branch-a-hacer-push

🤖 Guía Rápida Para Desarrollar

1. Instala dependencias

   yarn

2. Inicia el proyecto

   yarn dev

   El sitio estará disponible en http://localhost:3000.

⚠️ Dependiendo del lugar en la saga donde te ubiques podrías necesitar algunas Variables de Entorno. Revisa .env.local.example y el Curso de Next.js: Deploy a Producción

⚙️ Importar contenido a Contentful

El proyecto utiliza un Content Management System (CMS) llamado Contenful. En el primer curso de esta Saga Next.js: Sitios Estáticos y Jamstack vemos en detalle como configurarlo.

Los pasos son:

1. Crea una cuenta en Contentful y crea un nuevo espacio (Space) vacio.

2. Crea un nuevo Content Managment Token, guarda su valor y el de tu Space ID.

   💡 Lo generas desde Your Space > Settings > API Keys > Content Management tokens.

3. Modifica el archivo import/config.json con los valores del punto anterior.

   cd platzi-plantpedia
   nano import/config.json

4. Instala la herramienta CLI de Contentful:

   npm install -g contentful-cli

5. Corre el siguiente comando desde la raiz de este proyecto:

   cd platzi-plantpedia
   contentful space import --config import/config.json

   💡 La importación puede tardar varios minutos.

6. En el navegador, verifica que el contenido se haya importado en la pestaña Model y Content.

   💡 Deberías ver al menos 400 registros creados entre entradas e imágenes.

7. Adicionalmente, puedes interactuar con tu contenido utilizando el explorador de GraphQL:

   Abre en tu navegador: https://graphql.contentful.com/content/v1/spaces/{SPACE}/explore?access_token={CDA_TOKEN}

   💡 Reemplaza {SPACE} y {CDA_TOKEN} por tus valores propios.

🧑‍🏫 Otras preguntas y respuestas

¿Cómo se creo la carpeta `api` y `api/generated`?

💡 Si utilizas este repositorio como lo vimos en clase y usas el contenido de Contentful que se provee, no es necesario correr o realizar algo para la auto-generación de código.

Gracias a que utilizamos GraphQL, auto-generamos el archivo api/generated/graphql.ts para producir:

• Los tipos de datos del Modelo de nuestro contenido
• El tipo esperado en la respuesta de cada API
• Una función lista (getSdk) para realizar el fetch de cada URL.

💡 El código es auto-generado usando graphql-codegen. No se vió en clase pero se dejo como reto avanzado.

Otros datos claves son:

• queries.graphql indica todo lo que se debe auto-generar.

• codegen.yml es el archivo de configuración.

• La auto-generación se puede correr con:

  ACCESS_TOKEN=<access_token> SPACE_ID=<space_id> yarn build:schema

Luego, el archivo api/index.ts y api/selectors.ts son una capa que ge creado encima – un wrapper – para exportar funciones y tipos más fáciles de usar.

La librería X no está en su última versión

Si te encuentras trabajando desde una de las etiquetas de git es posible que las librerías no estén en su versión más actual.

Para obtener el proyecto funcionando con las versiones más actualizadas deberás crear un branch desde el último commit de main:

git fetch
git checkout -b dev origin/main`

💡 El último commit también representa el proyecto terminado con todas las sagas incluidas.

Las versiones de las librerías solo se mantienen actualizadas al final proyecto pero no se hace en cada etiqueta de git para no introducir cambios que causen que el código sea diferente al visto en la clase.

🐞 ¿Encontraste un error o mejora?

Ayuda a otros estudiantes con eso que acabas de descubrir que haría este curso y respositorio mucho mejor.

• En Issues puedes reportar errores, agregar sugerencias y comentarios.
• Por su parte, los Pull Request siempre estarán abiertos para recibir mejoras puntuales.

Happy hacking!