Next.js — Avanzado

Curso dirigido a desarrolladoras y desarrolladores con experiencia sólida en Next.js que necesitan llevar sus aplicaciones al siguiente nivel en entornos de producción exigentes. A lo largo de diez horas, la persona participante explorará cómo diseñar arquitecturas escalables que separen dominios y capas de datos, tomará decisiones fundamentadas sobre estrategias de rendering y caché multicapa, optimizará los Core Web Vitals hasta alcanzar umbrales medibles, y anticipará vulnerabilidades de seguridad en Edge Runtime y Server Actions. Al finalizar, será capaz de evaluar, diseñar y automatizar soluciones de calidad en proyectos Next.js a escala, respaldando cada decisión con métricas y criterios técnicos objetivos.

1. Describir los principios que diferencian una arquitectura Next.js a escala de una solución monolítica, identificando los criterios que determinan la separación entre dominios, capas de datos y componentes server/client.
2. Evaluar críticamente qué estrategia de rendering (SSR, SSG, ISR, PPR) corresponde a cada caso de uso, argumentando el trade-off entre frescura de datos, coste computacional y experiencia de usuario con métricas de referencia.
3. Optimizar los Core Web Vitals (LCP, CLS, INP) de una aplicación Next.js existente hasta alcanzar umbrales definidos, aplicando lazy loading, font optimization, image optimization y streaming.
4. Arquitecturar un sistema de caché multicapa configurando cache tags, revalidación on-demand y políticas de fetch granulares, anticipando los escenarios de invalidación ante cambios de datos en producción.
5. Diseñar rutas complejas con el App Router usando parallel routes e intercepting routes, anticipando problemas de hidratación y estado de URL en flujos de navegación anidados.
6. Evaluar el impacto de librerías de terceros en el bundle del cliente usando herramientas de análisis, aplicando dynamic imports o alternativas para reducir el tamaño medido.
7. Anticipar vectores de ataque en una aplicación Next.js implementando middleware de autenticación y autorización en Edge Runtime, cabeceras de seguridad HTTP y protección de Server Actions.
8. Automatizar un pipeline de calidad continua que ejecute análisis de bundle, Lighthouse CI y tests E2E sobre cada Pull Request, configurando umbrales de fallo que bloqueen merges por degradación de rendimiento.

Arquitectura a escala en Next.js. El curso arranca con los principios que rigen el diseño de proyectos Next.js en entornos con alta carga y equipos grandes: cómo separar dominios de negocio, organizar las capas de datos y tomar decisiones razonadas sobre qué lógica pertenece al servidor y qué al cliente. Se estudian patrones concretos de carpetas y módulos que facilitan la mantenibilidad a largo plazo.

Estrategias de rendering y caché multicapa. A continuación se profundiza en la selección razonada entre SSR, SSG, ISR y Partial Prerendering (PPR), contrastando cada opción con métricas de frescura de datos, coste computacional y experiencia de usuario. Se extiende el análisis al diseño de una caché multicapa: configuración de cache tags, políticas de fetch granulares y revalidación on-demand, prestando especial atención a los escenarios de invalidación que aparecen en producción ante cambios inesperados de datos.

Rendimiento y optimización del bundle. Este bloque aborda la mejora medible de los Core Web Vitals, recorriendo técnicas de lazy loading, optimización de imágenes y fuentes, y streaming de componentes. Se complementa con el análisis crítico del bundle del cliente mediante @next/bundle-analyzer, donde se aprende a detectar importaciones problemáticas y a aplicar dynamic imports o paquetes alternativos para reducir el peso servido al navegador.

Routing avanzado con el App Router. Se trabajan los patrones de parallel routes e intercepting routes del App Router, identificando los problemas de hidratación y gestión de estado de URL que surgen en flujos de navegación complejos y anidados, y aplicando las soluciones recomendadas por el framework.

Seguridad en Next.js. El bloque de seguridad cubre los principales vectores de ataque en aplicaciones Next.js modernas: implementación de middleware de autenticación y autorización en Edge Runtime, configuración de cabeceras HTTP de seguridad y protección de Server Actions frente a accesos no autorizados.

Pipeline de calidad continua y estrategias de despliegue. El curso cierra con la automatización de un pipeline de CI que integra análisis de bundle, Lighthouse CI y tests E2E, con umbrales configurables que bloquean merges ante regresiones de rendimiento. Se acompaña de una evaluación comparativa de las opciones de despliegue —Vercel managed, self-hosted con Docker y serverless en AWS/GCP—, seleccionando la estrategia óptima según restricciones de coste, latencia y control operacional.

• Node.js 20 LTS o superior instalado en local.
• Next.js 14 o superior (se recomienda la última versión estable).
• Gestor de paquetes pnpm ≥ 9 (alternativa: npm ≥ 10 o yarn ≥ 4).
• Editor de código con soporte TypeScript (se recomienda VS Code con las extensiones ESLint y Prettier).
• Cuenta gratuita en Vercel para los ejercicios de despliegue y Lighthouse CI.
• Docker Desktop instalado para los ejercicios de self-hosting.
• Acceso a una cuenta de GitHub o GitLab para la configuración del pipeline de CI.
• Navegador Chromium actualizado para el uso de DevTools y WebPageTest.

Para aprovechar este curso al máximo, la persona participante debe haber completado el curso NEJ02 (Next.js — Intermedio) o acreditar experiencia equivalente. Se asume dominio del App Router, Server Components, Client Components, Route Handlers y las primitivas de fetching de datos propias de Next.js 14+. También se espera familiaridad con React 18 (Suspense, transitions), TypeScript a nivel intermedio, gestión básica de CI/CD y conocimiento general de HTTP y rendimiento web.