Capítulo 1: Introducción a Next.js

• ¿Qué es Next.js?
  • Descripción general de Next.js y sus características.
  • ¿Por qué elegir Next.js en lugar de otros frameworks?
  • Aplicaciones del mundo real de Next.js.
• Requisitos previos
  • Conocimientos básicos de JavaScript, React y Node.js.
  • Software requerido (Node.js, npm/yarn).
  • Configuración del entorno de desarrollo (VS Code o cualquier editor preferido).

Capítulo 2: Configuración del proyecto Next.js

• Instalando Next.js
  • Creando un nuevo proyecto Next.js con npx create-next-app.
  • Descripción general de la estructura del directorio.
  • Usando TypeScript con Next.js.
• Comprensión de la estructura del archivo
  • Directorio de páginas y sistema de enrutamiento.
  • Directorio público de activos estáticos.
  • Directorio API para rutas backend.

Capítulo 3: Creación de su primera página

• Creando páginas
  • Introducción a la carpeta Páginas.
  • Creando y vinculando páginas.
  • Navegando entre páginas con siguiente/enlace.
• Enrutamiento dinámico
  • Creando rutas dinámicas con [param].
  • Enrutamiento anidado y sus casos de uso.
• Comprensión del renderizado previo
  • Generación estática versus renderizado del lado del servidor.
  • Cómo utilizar getStaticProps y getServerSideProps.

Capítulo 4: Estilo en Next.js

• Módulos CSS
  • Cómo utilizar módulos CSS para aplicar estilos con alcance.
  • Gestión de CSS global.
• Componentes con estilo
  • Configuración de componentes con estilo en Next.js.
  • Gestión de temas.
• Usando Sass con Next.js
  • Instalando y configurando Sass.
  • Mejores prácticas para usar Sass en un proyecto Next.js.

Capítulo 5: Obtención de datos en Next.js

• Obtención de datos del lado del cliente
  • Usando fetch y axios para recuperar datos en el componente.
• Obtención de datos del lado del servidor
  • Usando getServerSideProps para renderizado del lado del servidor.
• Obtención de datos estáticos
  • Usando getStaticProps y getStaticPaths para generación estática.
  • Regeneración estática incremental (ISR) para contenido dinámico.

Capítulo 6: Rutas API en Next.js

• Creación de rutas API
  • Descripción general del directorio API.
  • Creación de API RESTful simples.
• Manejo de solicitudes de API
  • Comprender los objetos de solicitud y respuesta.
  • Manejo de errores y códigos de respuesta.

Capítulo 7: Uso de Next.js con un CMS

• Configurar un CMS
  • ¿Por qué utilizar un CMS con Next.js?
  • Integración con opciones populares de CMS (WordPress, Contentful, Sanity, etc.).
• Obteniendo datos de CMS en Next.js
  • Cómo conectar tu CMS a Next.js.
  • Gestionar contenido dinámico con un CMS.

Capítulo 8: Next.js y autenticación

• Implementación de autenticación
  • Estrategias de autenticación en Next.js.
  • Uso de tokens JWT, cookies y gestión de sesiones.
• Autenticación de terceros
  • Configuración de proveedores de OAuth (Google, GitHub).
  • Usar bibliotecas como NextAuth.js para la autenticación.

Capítulo 9: Optimización del rendimiento

• Optimización de imagen
  • Usando el componente de imagen Next.js para imágenes optimizadas.
  • Carga diferida de imágenes.
• Optimización de scripts
  • Comprensión del componente de secuencia de comandos Next.js.
  • Aplazar la carga del script asíncrono.
• División de código y carga diferida
  • Cómo Next.js maneja la división de código automáticamente.
  • Implementando importaciones dinámicas para un mejor rendimiento.

Capítulo 10: SEO en Next.js

• Comprensión del SEO en Next.js
  • Importancia del SEO para aplicaciones Next.js.
• Metaetiquetas y gráfico abierto
  • Usando next/head para etiquetas SEO.
  • Configuración de etiquetas Open Graph y Twitter Card.
• Generando mapas de sitio y robots.txt
  • Creación de mapas de sitio dinámicos.
  • Usando robots.txt para rastreadores.

Capítulo 11: Implementación de Next.js

• Plataformas de implementación
  • Vercel: la plataforma recomendada para Next.js.
  • Otras plataformas: AWS, Netlify y DigitalOcean.
• Implementación en Vercel
  • Guía paso a paso para implementar tu aplicación en Vercel.
• Configuración para producción
  • Variables de entorno en Next.js.
  • Mejores prácticas para una aplicación Next.js lista para producción.

Capítulo 12: Configuración y personalización avanzadas

• Personalizar la configuración del paquete web
  • Usando next.config.js para configuración avanzada.
  • Agregar cargadores y complementos de Webpack personalizados.
• Servidor personalizado
  • Cuándo usar un servidor personalizado.
  • Implementando un servidor personalizado con Express.

Capítulo 13: Gestión del estado en Next.js

• Introducción a la Gestión del Estado
  • Cuándo y por qué utilizar la gestión de estado en Next.js.
  • Opciones para la gestión del estado (React Context, Redux, Recoil, Zustand).
• Usando la API de contexto de React
  • Configurando el estado global con React Context.
  • Pasar estado entre componentes.
• Integrando Redux con Next.js
  • Configurando Redux con Next.js.
  • Manejo del estado en entornos del lado del servidor y del lado del cliente.

Capítulo 14: Pruebas en Next.js

• ¿Por qué probar las aplicaciones Next.js?
  • Importancia de las pruebas y diferentes tipos de pruebas.
  • Descripción general de las herramientas de prueba (Jest, React Testing Library, Cypress).
• Pruebas unitarias con Jest
  • Configurando Jest en un proyecto Next.js.
  • Escribir pruebas unitarias para componentes y funciones de utilidad.
• Pruebas de integración con la biblioteca de pruebas de React
  • Prueba de componentes y páginas con React Testing Library.
  • Burlarse de la obtención de datos y de las llamadas API.

Conclusión

• Pensamientos finales
  • Resumen de conclusiones clave.
  • Recursos para seguir aprendiendo.
  • Animar a los lectores a explorar y experimentar con Next.js.

Para un aprendizaje más profundo, continúa tu viaje aquí.