Next.js y deploy real

Al finalizar, podrás decidir cuándo usar layout.tsx (UI persistente entre rutas hermanas) frente a template.tsx (re-monta en cada navegación), aplicando el modelo de Nested Routing del App Router para diseñar dashboards modulares sin repetir cabeceras ni sidebars.

Al finalizar, podrás decidir y justificar qué componentes de una aplicación Next.js viven como Server Components y cuáles cruzan a Client Components con la directiva 'use client', entendiendo el coste real en bundle JavaScript, la propagación del boundary y por qué 'Server por defecto, Client por necesidad' es la única heurística que escala.

Al finalizar, podrás hacer fetch directamente en Server Components usando async/await, decidir cuándo dejar el cache automático, cuándo declarar revalidate (ISR), cuándo usar unstable_cache para envolver lógica no-fetch, y cuándo forzar dynamic = "force-dynamic" o cache: "no-store" para datos en tiempo real. Comprenderás las cuatro capas de caching del App Router (Request Memoization, Data Cache, Full Route Cache, Router Cache) y podrás explicar qué capa invalida cada herramienta.

Al finalizar, podrás escribir y desplegar una Server Action con la directiva 'use server', invocarla desde un formulario client, persistir el cambio en base de datos y revalidar la caché con revalidatePath/revalidateTag — sin crear endpoints POST /api/*.

Al finalizar, podrás construir un formulario en Next.js 14+ con Server Action validada por un schema de Zod, manejo de errores con useActionState (React 19) y progressive enhancement — funciona aunque el usuario tenga JavaScript desactivado.

Al finalizar, podrás decidir entre revalidación time-based e on-demand, aplicar `revalidatePath`, `revalidateTag` y `router.refresh()` en el contexto correcto, y diseñar un sistema de invalidación de caché que mantenga UI y datos sincronizados tras cualquier mutación en Next.js 14+.

Al finalizar, podrás configurar variables de entorno en Next.js distinguiendo entre las expuestas al navegador (NEXT_PUBLIC_) y las server-only, validar el schema con zod/t3-env y entender por qué nunca pones un secreto en NEXT_PUBLIC_.

Al finalizar, podrás conectar un repositorio de GitHub a Vercel, generar una preview deployment por cada pull request y desplegar a producción al hacer merge a main, aplicando el patrón Git-driven deploys.

Al finalizar, podrás comprar un dominio (Namecheap o Cloudflare Registrar), apuntarlo a Vercel y verificar que HTTPS queda activo automáticamente, entendiendo qué hace cada pieza (registrador, DNS, ACME, Let's Encrypt) y por qué la cadena funciona sin que tú la toques.

Al finalizar, podrás instrumentar una app Next.js en producción con observabilidad mínima viable: Vercel Analytics para tráfico real, Web Vitals para velocidad, Sentry para errores y un event tracker (Plausible o PostHog) para eventos de negocio, entendiendo qué hace cada pieza y por qué los tres pilares (logs, metrics, traces) no se pueden sustituir entre sí.