Curso de Next.js

Bienvenido al Curso de Next.js. Empieza por cómo renderiza Next.js y llega hasta una aplicación full stack completa: App Router, Server y Client Components, caché con Cache Components, Server Actions, base de datos, autenticación, pruebas, seguridad y despliegue. Cada módulo se apoya en la aplicación EMPRESA de los demás cursos, y todos los ejemplos se han compilado y ejecutado con las versiones indicadas, comparándolos con Next.js 15.

Es adecuado para el segundo curso de los ciclos formativos de DAW y DAM, para asignaturas universitarias de desarrollo web y para profesionales que vengan de React o de versiones anteriores de Next.js.

💡 Consejo: Necesitas saber React. Si no es así, empieza por el Curso de React, que también presenta los Server Components. Para los estilos, el curso enlaza al Curso de Tailwind CSS.

¿Qué vas a aprender?

Al finalizar este curso serás capaz de:

  • Entender los modelos de renderizado: SSG, SSR, streaming, Partial Prerendering y RSC
  • Organizar aplicaciones con el App Router: layouts, rutas dinámicas, paralelas e interceptadas
  • Decidir qué es Server Component y qué es Client Component, y qué viaja al navegador
  • Dominar la caché de Next.js 16 con Cache Components, y el modelo de Next.js 15
  • Mutar datos con Server Actions, validar con Zod y crear APIs con Route Handlers
  • Usar proxy, configuración y variables de entorno sin filtrar secretos
  • Trabajar con una base de datos SQLite con Drizzle y autenticar con sesiones propias o Better Auth
  • Internacionalizar con next-intl, medir el rendimiento y probar con Vitest y Playwright
  • Proteger la aplicación (CSP, CSRF, taint) y desplegarla con Docker, exportación estática o un adaptador
  • Migrar código de Pages Router y actualizar de Next.js 15 a 16

Versión del curso

El curso utiliza Next.js 16.4 (verificado con 16.4.3 y el proyecto final con 16.4.4) con React 19.3, TypeScript, Tailwind CSS 4, Drizzle ORM con SQLite, Zod 4, Vitest 5 y Playwright. Instala siempre el último parche 16.4.x: Next.js publica parches de seguridad todos los meses. Solo se enseñan versiones estables: ni canary ni preview.

¿Qué versión elegir?

Next.js 16 es la versión Active LTS, así que el curso usa la LTS vigente. La anterior, Next.js 15, sigue en Maintenance LTS y recibe parches de seguridad hasta el 31 de enero de 2027. Muchos proyectos siguen en ella, y el salto a la 16 es grande:

Si sigues en Next.js 15 Qué ocurre
No tendrás Cache Components ('use cache', cacheLife, cacheTag, updateTag, refresh), ensureStatic, Instant Navigations, Partial Prefetching, catchError, proxy.ts y la Adapter API estable
Funciona distinto La caché (fetch con next.revalidate, revalidate de segmento, unstable_cache), middleware.ts, revalidateTag con un argumento y next/image con valores por defecto más permisivos
Ojo En la 15 una página puede quedar estática con los datos del build sin avisar; en la 16 el build falla y te obliga a decidir
Necesitas Node 18.18 o superior y React 19.1

La guía de versiones reúne todos los apartados afectados, con lo que tienes que hacer en Next.js 15.

Recursos para descargar

Estructura del curso

El curso se divide en 26 módulos agrupados en 5 bloques:

Bloque 1: Fundamentos (Módulos 00-07)

Módulo Tema Descripción
00 Introducción a Next.js Qué es Next.js, versiones, LTS y 16 frente a 15
01 Entorno y create-next-app create-next-app, estructura, Turbopack, agentes y MCP
02 Modelos de renderizado CSR, SSG, ISR, SSR, streaming, PPR y RSC, vistos en la red
03 App Router: páginas y layouts Páginas, layouts, templates, Link y navegación
04 Rutas dinámicas y organización params, generateStaticParams, grupos y organización
05 Server y Client Components La frontera entre servidor y cliente y qué se serializa
06 Estilos CSS Modules, Tailwind 4, Sass, next/font y temas
07 Imágenes, fuentes y metadatos next/image, metadatos, imágenes OG, sitemap y robots

Bloque 2: Datos y caché (Módulos 08-12)

Módulo Tema Descripción
08 Obtener datos en el servidor fetch, paralelo frente a cascada, Suspense y streaming
09 Caché: Cache Components Cache Components a fondo y el modelo de Next.js 15
10 Server Actions y mutaciones useActionState, updateTag, redirect y seguridad
11 Formularios y validación Zod 4, errores por campo y mejora progresiva
12 Route Handlers y APIs route.ts, streaming, CORS y webhooks

Bloque 3: Rutas y estados (Módulos 13-15)

Módulo Tema Descripción
13 Proxy y configuración proxy.ts, next.config y variables de entorno
14 Errores y estados especiales error.tsx, not-found, forbidden e instrumentación
15 Rutas avanzadas y navegación instantánea Paralelas, interceptadas, modales e Instant Navigations

Bloque 4: Aplicación completa (Módulos 16-19)

Módulo Tema Descripción
16 Base de datos con Drizzle Drizzle, SQLite, migraciones y capa de datos
17 Autenticación y autorización Sesión con jose, roles y Better Auth
18 Estado en el cliente y en la URL Estado en la URL, TanStack Query y Zustand
19 Internacionalización next-intl, rutas por idioma y formatos

Bloque 5: Calidad y producción (Módulos 20-25)

Módulo Tema Descripción
20 Rendimiento Turbopack, análisis de paquetes y Core Web Vitals
21 Testing Vitest, Server Actions, capa de datos y Playwright
22 Seguridad CSP, CSRF, taint, secretos y parches
23 Despliegue Docker standalone, exportación estática y adaptadores
24 Pages Router y migración Pages Router, codemods y actualización de 15 a 16
25 Proyecto final Aplicación EMPRESA full stack completa, con pruebas y Docker

Requisitos

  • React y JavaScript moderno
  • Node 20.9 o superior y un editor (Visual Studio Code recomendado)
  • Docker para el módulo de despliegue (se explica cuándo hace falta)

Convenciones utilizadas

A lo largo del curso encontrarás estos indicadores:

📘 Concepto: Explicación teórica de un concepto importante.

💻 Ejemplo: Código de ejemplo que puedes copiar y ejecutar.

✏️ Ejercicio: Práctica para que resuelvas por tu cuenta.

⚠️ Importante: Información crucial que debes recordar.

💡 Consejo: Trucos y buenas prácticas profesionales.

Table of contents