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
- 🔎 ¿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?
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:
-
Clona el repositorio, si no lo has hecho aún:
git clone git@github.com:jonalvarezz/platzi-plantpedia.git
-
Actualiza la información de las etiquetas:
git fetch --tags
-
Lista las etiquetas disponibles:
git tag
Deberías ver algo como:
0-inicio 1-incremental-rendering 10-react-query 11-memoization ...
-
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 git@github.com:jonalvarezz/mi-repo-mas-bello.git
# Agrega el nuevo remote
git remote add mi-repo git@github.com: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
-
Instala dependencias
yarn
-
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
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:
-
Crea una cuenta en Contentful y crea un nuevo espacio (Space) vacio.
-
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.
-
Modifica el archivo
import/config.json
con los valores del punto anterior.cd platzi-plantpedia nano import/config.json
-
Instala la herramienta CLI de Contentful:
npm install -g contentful-cli
-
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.
-
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.
-
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.
¿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.
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!