Configuración y uso inicial de un proyecto Next.js con Contentful

Curso de Next.js: Sitios Estáticos y Jamstack

Contenido del curso

Introducción: rendering modes de Next.js

Arquitectura del proyecto

Static Generation

Incremental Static Generation

Siguientes pasos

18
Despliegue de Next.js hacia Producción: Variables y Optimización
01:41 min

Bonus

19
Lectura de Archivos en Next.js con Node.js y File System
09:51 min

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:0010:51

Configuración y uso inicial de un proyecto Next.js con Contentful

Curso de Next.js: Sitios Estáticos y Jamstack

Clase 6 de 19

Clase 6 / 19

Recursos

Conocer la anatomía de un proyecto antes de escribir la primera línea de código marca la diferencia entre avanzar con seguridad y perder horas resolviendo problemas evitables. Aquí se desglosa cómo está organizado un proyecto de Next.js construido con TypeScript, qué dependencias trae listas y cómo cada carpeta cumple un rol específico para conectarse con Contentful.

¿Qué revela el package.json sobre la aplicación?

El punto de partida para inspeccionar cualquier aplicación de JavaScript o Node.js es el archivo package.json [01:15]. Este archivo concentra información esencial:

Los scripts principales son dev, build y start, cada uno utilizando Next.js en su variación por environment.
Prettier ya está instalado para mantener un formato de código consistente.
Material UI viene configurado junto con React y React DOM.
Apollo está incluido para trabajar con GraphQL.
Dependencias de Contentful para manejar rich text.
Herramientas de Code Generation y Tailwind listas para usar.

Este proyecto combina Material UI y Tailwind como sistemas de estilos, lo cual ofrece flexibilidad tanto para componentes prediseñados como para utilidades CSS [02:20].

¿Cómo se configura TypeScript con alias de rutas?

El archivo TSConfig confirma que todo el proyecto está escrito en TypeScript [02:40]. Dentro de sus opciones, destacan los alias de rutas (paths), que simplifican las importaciones:

UI: apunta a las primitivas de interfaz.
API: da acceso directo a la capa de datos.
Components: agrupa los componentes con lógica de negocio.

Estos alias evitan rutas relativas largas y hacen el código más legible.

¿Qué contiene la carpeta API y por qué importa resources.d.ts?

La carpeta API contiene subcarpetas y archivos clave: una carpeta generada, un index, queries de GraphQL, resources y selectores [03:20]. El archivo más relevante es resources.d.ts, un archivo de tipos globales para TypeScript (los archivos .d.ts cumplen exactamente esa función).

Dentro de resources.d.ts se definen los tipos que replican la estructura de Contentful [03:40]:

Imagen: con los mismos fields configurados en el CMS.
Categoría y Autor: como entidades independientes.
Rich text de Contentful: representado como un objeto JSON complejo.
Planta: la entidad principal, con relaciones hacia categoría y autor.

Si trabajas con tu propio contenido, estos tipos deben coincidir casi uno a uno con tus modelos en Contentful para que TypeScript realmente te ayude a escribir código correcto.

¿Cómo se organizan UI y componentes?

La carpeta UI agrupa todas las primitivas de interfaz, construidas con Tailwind y Material UI [04:30]. Son elementos visuales sin lógica de negocio.

Una capa por encima está Components, donde se combinan elementos de UI con business logic [04:45]. Un ejemplo claro es PlantCollection, que importa componentes de UI y utiliza funcionalidades de Next.js para crear un componente con más responsabilidad.

Todos estos componentes son lo que se conoce como componentes tontos (dumb components): no saben de dónde vienen los datos [05:10]. La tarea será alimentarlos con información proveniente de Contentful.

¿Qué rol cumplen las páginas y archivos especiales de Next.js?

La carpeta Pages es fundamental en cualquier proyecto de Next.js [05:30]. Al inicio contiene:

Una página UI de prueba para verificar los elementos visuales.
La página index, que será la principal.
El archivo _app, que provee la estructura global de la interfaz.
El archivo _document, configurado para hacer server side rendering de Material UI y Tailwind, convirtiendo los estilos en CSS desde el servidor sin dejar esa carga al navegador [05:55].

El archivo de configuración next.config.js habilita webpack 5 y un bundle analyzer para inspeccionar el peso del proyecto [06:20].

Al ejecutar yarn dev, el proyecto corre en localhost:3000 y muestra una pantalla de bienvenida con enlaces a la documentación de Next.js, el curso básico de Platzi y la documentación para desarrolladores de Contentful [06:50].

Si algo no funciona como se describe, deja tu pregunta en los comentarios para recibir ayuda y poder continuar sin bloqueos.

Humberto Asca

Hace 4 años

He llegado hasta la lección 6 y con diferentes issues. He leído los comentarios de todoss hasta esta lección y no tengp forma de habilitar la app basado en los pasos que se siguen. He lideado con tratar de resolverlo y varias librerías están desfasadas, obsoletas.

Ejecuté: npm audit fix --force

luego: npm run build

y genera el error:

> platzi-nextjs-plus@0.1.0 build
> next build

warn  - Invalid next.config.js options detected: 
warn  -     The root value has an unexpected property, future, which is not in the list of allowed properties (amp, analyticsId, assetPrefix, basePath, cleanDistDir, compiler, compress, configOrigin, crossOrigin, devIndicators, distDir, env, eslint, excludeDefaultMomentLocales, experimental, exportPathMap, generateBuildId, generateEtags, headers, httpAgentOptions, i18n, images, modularizeImports, onDemandEntries, optimizeFonts, output, outputFileTracing, pageExtensions, poweredByHeader, productionBrowserSourceMaps, publicRuntimeConfig, reactStrictMode, redirects, rewrites, sassOptions, serverRuntimeConfig, skipMiddlewareUrlNormalize, skipTrailingSlashRedirect, staticPageGenerationTimeout, swcMinify, target, trailingSlash, transpilePackages, typescript, useFileSystemPublicRoutes, webpack).
warn  - See more info here: https://nextjs.org/docs/messages/invalid-next-config
info  - Linting and checking validity of types ..warn  - Minimum recommended TypeScript version is v4.3.2, older versions can potentially be incompatible with Next.js. Detected: 4.2.4
info  - Linting and checking validity of types .Failed to compile.

./pages/_app.tsx:11:6
Type error: Type '{ children: Element; }' has no properties in common with type 'IntrinsicAttributes'.

   9 | 
  10 |   return (
> 11 |     <UIProvider>
     |      ^
  12 |       <Component {...pageProps} />
  13 |     </UIProvider>
  14 |   )

Podría alguien ayudarme en este proceso de aprendizaje?

Angelo Rivera

Hace 3 años

El curso tiene 2 años de antiguedad, me parece. Ahora estamos en Next Js 13 y a cambiado mucho el frameworks y librerias usadas. Aunque todo es migragble con tiempo e investigacion, si creo que deberian dar ese aviso para las personas que empiecen a llegar este curso ya en septiembre 2023.

Comentarios (16)16 comentarios

German Moren

Hace 5 años

Jair Neri

Marcelo Oggero

Miguel Hernández Casiano

Andrés Gomez

Jesus Alberto Garzon Castillo

reacosta7383

Rony Porraz Vargas

Daniel Aguirre

Hace 2 años

Eduardo Fortuna

Camilo José Mezú Mina

Jesús Daniel Medina Cruz

Jonathan 🦑 Alvarez

Profesor

Federico Noya

brandon james grimaldo moscote

Manuel Cañizares

Wilmer Nuñez

Lalo Díaz

Luis Román

Pol Valle

Ulqernesh Karvenae

Hace un año

Cesar González Caballero

Sergio Lopez

Introducción: rendering modes de Next.js

Creación de sitios estáticos con Next.js y Jamstack

Modos de Rendering en Next.js: Cliente, Servidor y Estático

Arquitectura del proyecto

Arquitectura Jam Stack con Next.js y GraphQL

Configuración de Contentful: Creación de Cuenta y API Tokens

Importación de Datos y Configuración en Contentful

Configuración y uso inicial de un proyecto Next.js con Contentful

Uso de GraphQL y Autogeneración en Next.js con Contentful

Static Generation

Renderizado de Listas con Next.js y Contentful

"Uso de getStaticProps en Next.js para Renderizado en Servidor"

Páginas Dinámicas en Next.js: Renderizado de Plantas y Entradas

Uso de getStaticPaths y getStaticProps en Next.js para páginas dinámicas

Ventajas y desventajas de Static Site Generation en Next.js

Incremental Static Generation

Configuración de Incremental Static Generation en Next.js

Uso del Fallback en Next.js: Estrategias y Aplicaciones

Estrategia Stale-While-Revalidate en Next.js

Ventajas y desventajas del Incremental Static Generation en Next.js

Server Side Rendering con Next.js: Ventajas y Desventajas

Siguientes pasos

Despliegue de Next.js hacia Producción: Variables y Optimización

Bonus

Lectura de Archivos en Next.js con Node.js y File System

Configuración y uso inicial de un proyecto Next.js con Contentful

Progreso del curso

Introducción: rendering modes de Next.js

Arquitectura del proyecto

Static Generation

Incremental Static Generation

Siguientes pasos

Bonus

Recursos

Recursos