Formación corporativa en Next.js

El sistema de rutas de Next.js se basa en el sistema de archivos: la estructura de carpetas dentro del directorio app/ define las URL de la aplicación. En este módulo se estudia en profundidad como funcionan las convenciones page.tsx, layout.tsx, loading.tsx, error.tsx y not-found.tsx, y como se combinan para crear una experiencia de navegación robusta.

Se abordan los layouts anidados y los templates, que permiten compartir interfaz entre rutas manteniendo o reiniciando el estado según convenga. También se exploran los route groups con la sintaxis (grupo) para organizar rutas sin afectar a la URL, las rutas paralelas con slots @ y las rutas dinámicas con segmentos [slug], [...catchAll] y [[...optional]], junto con generateStaticParams para la generación estática de páginas dinámicas.

Al completar este módulo se domina el sistema de enrutamiento de App Router y se pueden disenar estructuras de navegación complejas adaptadas a cualquier tipo de aplicación.

Los React Server Components (RSC) representan un cambio fundamental en la forma de construir aplicaciones React. En este módulo se explica que son, por que existen y como transforman el modelo mental del desarrollo frontend al ejecutar componentes exclusivamente en el servidor, eliminando JavaScript innecesario del bundle del cliente.

Se estudia la distinción entre Server Components y Client Components, el uso de la directiva "use client", las reglas de serialización y las estrategias de composición para combinar ambos tipos. También se aborda el data fetching directamente en Server Components mediante funciones asíncronas, el uso de fetch con opciones de cache y el acceso directo a bases de datos desde el servidor.

El módulo incluye además el renderizado progresivo con Streaming y Suspense, que permite enviar contenido al navegador de forma incremental mientras se resuelven las partes mas lentas de la página, mejorando la percepción de velocidad para el usuario final.

Las Server Actions permiten ejecutar funciones del servidor directamente desde componentes del cliente, eliminando la necesidad de crear endpoints API intermedios para las mutaciones de datos. En este módulo se aprende a definir Server Actions con la directiva "use server", a invocarlas desde formularios y eventos, y a gestionar el ciclo completo de una mutación.

Se estudia la integración con formularios HTML nativos mediante el atributo action, el uso de los hooks useFormState y useFormStatus para gestionar estados de carga y errores, y las técnicas de validación tanto en cliente como en servidor. También se aborda la revalidación de datos con revalidatePath y revalidateTag, que permiten invalidar la cache de forma selectiva tras una mutación.

El módulo cubre igualmente las actualizaciones optimistas con useOptimistic, que muestran cambios instantáneos en la interfaz mientras la operación del servidor se completa en segundo plano, con rollback automático en caso de error.

Next.js ofrece múltiples estrategias de renderizado que permiten elegir el modelo óptimo para cada página de la aplicación. En este módulo se estudian las diferencias entre Server-Side Rendering (SSR), Static Site Generation (SSG), Incremental Static Regeneration (ISR) y Partial Prerendering (PPR), así como los criterios de decisión para seleccionar una u otra.

Se profundiza en la generación estática con generateStaticParams, la revalidación incremental por tiempo y bajo demanda, y el modelo estable de Partial Prerendering que combina contenido estático y dinámico en la misma página utilizando Suspense boundaries como delimitadores.

El módulo dedica una sección específica al sistema de cache multicapa de Next.js, que incluye Request Memoization, Data Cache, Full Route Cache y Router Cache. Comprender como interactuan estas capas y como controlarlas es esencial para construir aplicaciones con el rendimiento esperado y evitar comportamientos inesperados de datos desactualizados.

Aunque los Server Components y las Server Actions cubren la mayoria de necesidades de datos, existen escenarios donde se requieren endpoints HTTP tradicionales. En este módulo se estudian los Route Handlers de Next.js, que permiten definir funciones GET, POST, PUT y DELETE en archivos route.ts dentro del directorio app/.

Se aborda el middleware de Next.js con middleware.ts, que intercepta las peticiones a nivel de edge antes de que lleguen a la ruta, permitiendo implementar redirecciones, manipulación de headers y lógica de autenticación con latencia mínima. También se estudian las respuestas de streaming con ReadableStream y Server-Sent Events para casos de uso que requieren envio progresivo de datos.

El módulo cubre igualmente la integración con APIs externas desde Route Handlers, incluyendo el manejo de errores, los reintentos y las buenas practicas para construir una capa de API robusta dentro de una aplicación Next.js.

La capa visual de una aplicación Next.js se beneficia de integraciones nativas con distintos sistemas de estilos y de componentes optimizados para rendimiento web. En este módulo se estudian CSS Modules y estilos globales con las convenciones propias de Next.js, así como la configuración de Tailwind CSS con PostCSS para un desarrollo de interfaces rápido y mantenible.

Se abordan los componentes next/image y next/font, que proporcionan optimización automática de imagenes (lazy loading, formatos modernos, redimensionado) y carga eficiente de fuentes (sin layout shift, subconjuntos automáticos). Estas herramientas integradas eliminan gran parte de la optimización manual que tradicionalmente requiere una aplicación web.

El módulo incluye también la Metadata API de Next.js, que permite definir metadatos estáticos y dinámicos con generateMetadata para mejorar el SEO, configurar Open Graph, Twitter Cards y otros elementos necesarios para el posicionamiento y la presentación de la aplicación en buscadores y redes sociales.

La autenticación es un requisito fundamental en la mayoria de aplicaciones de producción. En este módulo se estudia Auth.js (anteriormente NextAuth.js) en su versión 5, la solución de autenticación mas extendida en el ecosistema Next.js. Se cubre la instalación, configuración de providers, gestión de sesiones y la integración con el App Router.

Se aborda la protección de rutas mediante middleware, que permite restringir el acceso a secciones de la aplicación basandose en el estado de autenticación y los roles del usuario, todo ello ejecutandose a nivel de edge con latencia mínima. También se estudia la gestión de sesiones con JWT y con base de datos, los callbacks de Auth.js para personalizar tokens y sesiones, y la configuración de providers OAuth como Google y GitHub.

Al completar este módulo se dispone de un sistema de autenticación completo integrado en la aplicación Next.js, con protección de rutas, gestión de sesiones y soporte para múltiples proveedores de identidad.

Una de las ventajas de los Server Components es la capacidad de acceder directamente a bases de datos desde el servidor sin exponer credenciales ni lógica al cliente. En este módulo se estudian los dos ORMs mas utilizados en el ecosistema Next.js: Prisma y Drizzle ORM, cubriendo la configuración, la definición de esquemas, las migraciones y la ejecución de queries tipadas.

Se aborda el acceso directo a bases de datos desde Server Components, incluyendo las mejores practicas de connection pooling para evitar agotar conexiones en entornos serverless, y el uso de transacciones para operaciones que requieren atomicidad. También se estudian las particularidades del edge runtime, que impone restricciones sobre los drivers de base de datos disponibles, y las soluciones compatibles como Neon, PlanetScale y Turso.

Al finalizar este módulo se domina la capa de persistencia de una aplicación Next.js, desde la definición del esquema hasta las queries optimizadas en servidor, con conocimiento de las limitaciones y alternativas en entornos edge.

El ciclo de desarrollo de una aplicación Next.js se completa con pruebas automatizadas y un proceso de despliegue fiable. En este módulo se estudian las dos estrategias principales de testing: pruebas unitarias y de componentes con Jest y React Testing Library, y pruebas end-to-end con Playwright para validar flujos completos de navegación e interacción.

Se aborda el despliegue en Vercel, la plataforma nativa de Next.js, cubriendo la configuración de preview deployments, variables de entorno y dominios personalizados. También se estudia el despliegue self-hosted con Docker mediante Dockerfiles multi-stage y el modo standalone output, que genera un build optimizado independiente de node_modules.

El módulo incluye además la gestión de variables de entorno con el prefijo NEXT_PUBLIC_ para la exposición segura al cliente, la configuración de runtime config y la integración con pipelines de CI/CD para automatizar el proceso de build, test y despliegue en cada commit.