Next.js — Intermedio

Dirigido a desarrolladores que ya dominan los fundamentos de Next.js y necesitan dar el salto a patrones de arquitectura reales, este curso de ocho horas profundiza en las decisiones de diseño que marcan la diferencia en aplicaciones de producción. A lo largo de las sesiones, el participante aprenderá a elegir y combinar estrategias de renderizado (SSR, SSG, ISR y CSR) según los requisitos concretos de cada funcionalidad, a estructurar aplicaciones de complejidad media con el App Router —incluyendo layouts anidados, grupos de rutas y segmentos dinámicos—, y a gestionar el límite servidor/cliente de forma precisa mediante Server Components y Client Components. También abordará el fetching y la revalidación de datos con control granular, la depuración de errores de hidratación, la protección de rutas con middleware, el manejo seguro de variables de entorno y la personalización de next.config.js para cubrir necesidades reales del proyecto. Al finalizar, el participante será capaz de tomar decisiones arquitectónicas justificadas y entregar una aplicación Next.js robusta, segura y lista para entornos de producción.

1. Comparar las estrategias de renderizado SSR, SSG, ISR y CSR, seleccionando la más adecuada en función de la frecuencia de actualización de datos y la carga esperada de cada funcionalidad.
2. Diseñar la estructura de rutas de una aplicación de complejidad media con el App Router, incorporando layouts anidados, grupos de rutas y al menos una ruta dinámica con segmento parametrizado.
3. Integrar Server Components y Client Components en un mismo flujo de UI, delimitando la directiva "use client" exclusivamente donde existe interactividad o acceso a APIs de navegador.
4. Adaptar la estrategia de fetching y revalidación de datos en Server Components, configurando las opciones de caché y revalidación según la naturaleza estática o dinámica del recurso.
5. Depurar errores de hidratación entre servidor y cliente, identificando la causa raíz y aplicando la corrección apropiada.
6. Diseñar un middleware que intercepte rutas protegidas y redirija a usuarios no autenticados a partir de una cookie o cabecera de sesión.
7. Integrar variables de entorno diferenciando las expuestas al cliente de las exclusivas de servidor, garantizando que ningún secreto quede accesible en el bundle del navegador.
8. Adaptar next.config.js para resolver al menos dos necesidades reales del proyecto mediante redirecciones, rewrites, dominios de imágenes externas o cabeceras de seguridad HTTP.

Bloque 1 — Estrategias de renderizado y toma de decisiones arquitectónicas El curso arranca con un análisis comparativo de SSR, SSG, ISR y CSR. Se estudia cómo la frecuencia de actualización de los datos y el volumen de tráfico esperado determinan cuál de estas estrategias resulta más adecuada para cada funcionalidad, y se trabajan casos prácticos con justificación explícita de la elección.

Bloque 2 — Arquitectura de rutas con el App Router Se profundiza en el diseño de la jerarquía de rutas para aplicaciones de complejidad media, cubriendo la composición de layouts anidados, la organización mediante grupos de rutas para separar secciones de la aplicación y la implementación de segmentos dinámicos con parámetros de slug para recursos variables.

Bloque 3 — Modelo servidor/cliente: Server Components y Client Components Este bloque aborda la integración de ambos tipos de componentes en un mismo flujo de UI. Se establece el criterio preciso para delimitar la directiva "use client" —interactividad real o acceso a APIs de navegador— y se analizan los patrones de composición más habituales para evitar que lógica de servidor se exponga al cliente de forma inadvertida.

Bloque 4 — Fetching de datos y revalidación granular Se explora el sistema de fetching nativo de Next.js en Server Components, con especial atención a las opciones de caché y revalidación periódica. Se distingue entre recursos estáticos, semi-estáticos y dinámicos, y se practican configuraciones que equilibran rendimiento y frescura de los datos.

Bloque 5 — Depuración de errores de hidratación Se identifican las tres causas raíz más frecuentes de los errores de hidratación —diferencias en el DOM generado, acceso prematuro a window y datos no deterministas— y se aplica un proceso sistemático de diagnóstico y corrección, haciendo uso de las herramientas de desarrollo del navegador y de los mensajes de error del framework.

Bloque 6 — Middleware, variables de entorno y configuración del proyecto El bloque final integra tres capacidades orientadas a la preparación para producción: el diseño de un middleware que protege rutas y redirige usuarios no autenticados basándose en cookies o cabeceras de sesión; la gestión segura de variables de entorno diferenciando el prefijo NEXT_PUBLIC_ de las variables exclusivas de servidor; y la personalización de next.config.js para dar respuesta a necesidades reales como redirecciones permanentes, rewrites, dominios de imágenes externas y cabeceras de seguridad HTTP.

• Node.js 18 LTS o superior instalado localmente.
• Editor de código con soporte para TypeScript y JSX (se recomienda Visual Studio Code con la extensión oficial de ESLint).
• Next.js 14 o superior (se usará create-next-app con la plantilla App Router habilitada).
• Navegador moderno con DevTools (Chrome o Firefox en versión reciente).
• Cuenta gratuita en Vercel para despliegues de práctica opcionales.
• Acceso a una terminal Unix/macOS o PowerShell en Windows con permisos para instalar paquetes globales.

• Conocimiento de los conceptos fundamentales de Next.js: páginas, enrutamiento básico, renderizado inicial y estructura de un proyecto (equivalente al nivel Iniciación, curso NEJ01).
• Dominio de React a nivel funcional: componentes, props, estado con useState, efectos con useEffect y ciclo de vida básico.
• Experiencia con JavaScript/TypeScript moderno: módulos ES, async/await, desestructuración y gestión de promesas.
• Familiaridad con HTTP: diferencia entre peticiones GET y POST, cabeceras, códigos de estado y concepto de redirección.
• Capacidad para trabajar en la línea de comandos y gestionar dependencias con npm o pnpm.