Domina Next.js: de fundamentos a producción
App Router, Server y Client Components, data fetching y caché, Server Actions, rutas dinámicas, middleware, metadata y optimización. Editor Monaco con vista previa en vivo y verificación—aprende practicando.
- Paso 1
Next.js 1: ¿Qué es Next.js?
Next.js es un meta-framework construido sobre React. Mientras que una app de React simple (hecha con...
Comenzar lección - Paso 2
Next.js 2: El App Router y la estructura del proyecto
El App Router de Next.js usa el directorio app para definir tus rutas. En lugar de configurar una li...
Comenzar lección - Paso 3
Next.js 3: Tu primera página y ruta
Toda página en el App Router empieza igual: creas una carpeta, pones un page.tsx dentro, y exportas ...
Comenzar lección - Paso 4
Next.js 4: El layout raíz
Toda app de Next.js necesita exactamente un layout raíz, app/layout.tsx. A diferencia de una página ...
Comenzar lección - Paso 5
Next.js 5: Layouts anidados
Los layouts se anidan. Un layout en app/dashboard/layout.tsx envuelve cada página bajo dashboard, y ...
Comenzar lección - Paso 6
Next.js 6: Enlazar entre páginas
Next.js incluye un componente Link para navegar entre páginas. A diferencia de una etiqueta anchor n...
Comenzar lección - Paso 7
Next.js 7: Segmentos de ruta dinámicos
Una carpeta llamada con corchetes alrededor de id crea un segmento de ruta dinámico: app/products/[i...
Comenzar lección - Paso 8
Next.js 8: Rutas dinámicas anidadas y catch-all
A veces un segmento dinámico no es suficiente. Una carpeta con tres puntos antes de slug, como docs/...
Comenzar lección - Paso 9
Next.js 9: Grupos de rutas
Envolver el nombre de una carpeta en paréntesis crea un grupo de rutas. Te permite organizar rutas, ...
Comenzar lección - Paso 10
Next.js 10: Leer la URL: params y searchParams
Una página Server Component puede leer dos cosas sobre la URL actual: sus params dinámicos, de carpe...
Comenzar lección - Paso 11
Next.js 11: Componentes de Servidor por Defecto
En el App Router de Next.js, cada componente dentro de `app/` es un **Componente de Servidor** a men...
Comenzar lección - Paso 12
Next.js 12: El límite de "use client"
La directiva `'use client'` no solo marca un componente — marca un **límite**. Todo lo que ese compo...
Comenzar lección - Paso 13
Next.js 13: Elegir entre Servidor y Cliente
No todo componente necesita ser un Componente de Cliente. Pregúntate: ¿necesita **estado, efectos, m...
Comenzar lección - Paso 14
Next.js 14: Componer Componentes de Servidor dentro de Componentes de Cliente
Un Componente de Cliente no puede hacer `import` directo de un Componente de Servidor — pero **sí pu...
Comenzar lección - Paso 15
Next.js 15: Pasar Props del Servidor al Cliente
Cuando un Componente de Servidor renderiza un Componente de Cliente, cada prop que le pasa cruza un ...
Comenzar lección - Paso 16
Next.js 16: loading.tsx — UI de Carga Instantánea
Coloca un archivo `loading.tsx` junto a un `page.tsx` y Next.js **envuelve automáticamente ese segme...
Comenzar lección - Paso 17
Next.js 17: Suspense y Streaming
Los Componentes de Servidor permiten que Next.js haga **streaming** del HTML: en lugar de esperar a ...
Comenzar lección - Paso 18
Next.js 18: error.tsx — Límites de Error a Nivel de Ruta
Un archivo `error.tsx` junto a un `page.tsx` envuelve automáticamente ese segmento en un Error Bound...
Comenzar lección - Paso 19
Next.js 19: not-found.tsx y notFound()
Llamar a la función `notFound()` de `next/navigation` dentro de un Componente de Servidor **detiene ...
Comenzar lección - Paso 20
Next.js 20: Layouts vs Templates
Tanto `layout.tsx` como `template.tsx` envuelven los hijos de un segmento de ruta, pero se comportan...
Comenzar lección - Paso 21
Next.js 21: fetch() en Server Components
En el App Router, los Server Components pueden ser funciones `async`. Usas `await` para los datos di...
Comenzar lección - Paso 22
Next.js 22: Memoización de peticiones
Durante un mismo render, React **memoiza** automáticamente las llamadas idénticas a `fetch()` — mism...
Comenzar lección - Paso 23
Next.js 23: La Data Cache
Next.js extiende `fetch()` con una **Data Cache** persistente. Por defecto — `{ cache: 'force-cache'...
Comenzar lección - Paso 24
Next.js 24: Revalidación basada en tiempo (ISR)
`fetch(url, { next: { revalidate: 60 } })` sirve la respuesta cacheada al instante, pero la marca co...
Comenzar lección - Paso 25
Next.js 25: Revalidación bajo demanda
Esperar un temporizador de revalidación no siempre es suficiente — después de que un usuario agrega ...
Comenzar lección - Paso 26
Next.js 26: Parámetros estáticos y generación estática
Para una ruta dinámica como `app/books/[id]/page.tsx`, `generateStaticParams()` le dice a Next.js ex...
Comenzar lección - Paso 27
Next.js 27: Disparadores de renderizado dinámico
Una ruta es estática por defecto. Pero llamar a `cookies()`, `headers()`, o leer `searchParams` dent...
Comenzar lección - Paso 28
Next.js 28: Obtención de datos en paralelo
Esperar un fetch, luego otro, luego otro crea una **cascada (waterfall)** — el tiempo total es la SU...
Comenzar lección - Paso 29
Next.js 29: Streaming de datos lentos con Suspense
Envolver una sección lenta en `<Suspense fallback={...}>` deja que Next.js envíe de inmediato las pa...
Comenzar lección - Paso 30
Next.js 30: Patrones de obtención de datos en el cliente
No todo pertenece al servidor. Un cuadro de búsqueda activado por el usuario, un feed de comentarios...
Comenzar lección - Paso 31
Next.js 31: Fundamentos de Server Actions
Una **Server Action** es una función asíncrona marcada con la directiva `"use server"`. La llamas di...
Comenzar lección - Paso 32
Next.js 32: Formularios con Server Actions
Pasa una Server Action directamente a la prop `action` de un formulario — `<form action={addComment}...
Comenzar lección - Paso 33
Next.js 33: Estado pendiente y de formulario con useActionState / useFormStatus
`useActionState(action, initialState)` envuelve una Server Action y devuelve [state, formAction, isP...
Comenzar lección - Paso 34
Next.js 34: Actualizaciones optimistas con useOptimistic
useOptimistic(state, updateFn) devuelve [optimisticState, addOptimistic]. Llamas a addOptimistic(val...
Comenzar lección - Paso 35
Next.js 35: Validar entradas y devolver errores
La validación del lado del cliente es un detalle de UX, no una barrera de seguridad — una Server Act...
Comenzar lección - Paso 36
Next.js 36: Llamar Actions fuera de formularios
Una Server Action es solo una función asíncrona — nada la ata a <form action>. Llámala desde el onCl...
Comenzar lección - Paso 37
Next.js 37: Redirigir después de una mutación
redirect(path) de next/navigation, llamado dentro de una Server Action, envía al usuario a una ruta ...
Comenzar lección - Paso 38
Next.js 38: Revalidar después de una mutación
revalidatePath(path) y revalidateTag(tag), llamados dentro de una Server Action justo después de una...
Comenzar lección - Paso 39
Next.js 39: Route Handlers — Construyendo una API
Un **Route Handler** es una función que vive solo en el servidor, en `app/api/.../route.ts`. Reempla...
Comenzar lección - Paso 40
Next.js 40: Route Handlers — Segmentos dinámicos y NextRequest/NextResponse
Un archivo Route Handler puede vivir en una ruta dinámica como `app/api/todos/[id]/route.ts`. El han...
Comenzar lección - Paso 41
Next.js 41: Fundamentos de Middleware
`middleware.ts` en la raíz del proyecto corre en el **Edge**, antes de que la petición llegue a cual...
Comenzar lección - Paso 42
Next.js 42: Middleware para proteger rutas con autenticación
Una tarea muy común del middleware es **proteger** rutas: leer una cookie (normalmente un token de s...
Comenzar lección - Paso 43
Next.js 43: Rutas paralelas (@slot)
Las **rutas paralelas** permiten que un layout renderice más de una página en la misma URL, simultán...
Comenzar lección - Paso 44
Next.js 44: Rutas interceptoras (Intercepting Routes)
La convención de carpeta `(..)photo/[id]` **intercepta** la navegación: cuando un usuario hace clic ...
Comenzar lección - Paso 45
Next.js 45: Redirects y Rewrites
`next.config.js` expone `redirects()` y `rewrites()` — reglas basadas en patrones (con comodines `:p...
Comenzar lección - Paso 46
Next.js 46: Variables de entorno
Las variables de entorno de `.env.local` están disponibles en código de servidor (Route Handlers, Se...
Comenzar lección - Paso 47
Next.js 47: 404 personalizado y global-error.tsx
Un `app/not-found.tsx` a nivel de app se renderiza cuando ninguna ruta coincide o un componente llam...
Comenzar lección - Paso 48
Next.js 48: Configuración de segmento de ruta
Un `page.tsx` o `layout.tsx` puede exportar constantes especiales que configuran cómo se comporta es...
Comenzar lección - Paso 49
Next.js 49: CSS Modules en Next.js
Next.js le da a cada componente su propia hoja de estilos con **CSS Modules**: nombra un archivo `Co...
Comenzar lección - Paso 50
Next.js 50: Estilos globales e integración con Tailwind
No todo debería tener alcance limitado. Los resets globales, las variables CSS y las familias tipogr...
Comenzar lección - Paso 51
Next.js 51: next/image — Optimización automática de imágenes
El componente `Image` de `next/image` reemplaza a `img` y agrega optimización automática: sirve arch...
Comenzar lección - Paso 52
Next.js 52: next/font — Fuentes web autohospedadas
`next/font` descarga tus archivos de fuente en **build time** y los sirve desde tu propio dominio — ...
Comenzar lección - Paso 53
Next.js 53: generateMetadata — SEO dinámico
Una página puede exportar una función **async** `generateMetadata` que corre en el servidor antes de...
Comenzar lección - Paso 54
Next.js 54: Metadata estática y el objeto metadata
Cuando las etiquetas SEO de una página no dependen de datos pedidos, sáltate por completo la danza a...
Comenzar lección - Paso 55
Next.js 55: sitemap.ts y robots.ts
En vez de mantener a mano archivos estáticos sitemap.xml y robots.txt, Next.js te deja generarlos de...
Comenzar lección - Paso 56
Next.js 56: next/dynamic — División de código
`dynamic(() => import('./Heavy'), { ssr: false })` de `next/dynamic` carga de forma perezosa el códi...
Comenzar lección - Paso 57
Next.js 57: Runtime Edge vs Node.js
Cada Route Handler y página puede elegir dónde corre exportando `export const runtime = 'edge'` o de...
Comenzar lección - Paso 58
Next.js 58: Checklist de producción y despliegue
Construiste todo el kit de herramientas: estilos con alcance limitado, imágenes y fuentes optimizada...
Comenzar lección