Lección 1 de 17 · Lectura y práctica

Configuración inicial y estructura del App Router

Concepto claveEl App Router en Next.js 15 representa un cambio fundamental en cómo estructuramos aplicaciones web. Imagina que estás construyendo una casa: antes tenías que decidir dónde poner cada habitación desde el principio,.

Del concepto a la práctica

Taller de esta lección

La estructura del App Router se entiende mejor al traducir un dominio a URL. Para una biblioteca de artículos, app/page.tsx puede representar el inicio, app/articulos/page.tsx el listado y app/articulos/[slug]/page.tsx un detalle. La carpeta dinámica no es un registro: es un patrón para recibir un segmento.

Ejemplo resuelto

tsx

// app/articulos/[slug]/page.tsx
export default async function Page({ params }: { params: Promise<{ slug: string }> }) {
  const { slug } = await params
  return <main><h1>Artículo: {slug}</h1></main>
}

Con la URL /articulos/latencia, el encabezado muestra Artículo: latencia.

Pruébalo

Crea las tres rutas del dominio editorial.
Añade un layout.tsx con navegación común.
Visita /articulos/latencia y /articulos/errores.
Anota qué segmento cambia y qué contenido permanece.

Comprueba tu resultado

Error frecuente: poner el detalle en app/articulo/page.tsx, que no captura ningún identificador. Corrígelo usando [slug]. Resultado esperado: el listado responde en /articulos y las dos URL dinámicas muestran slugs diferentes, sin duplicar la estructura de navegación.

Completa la ruta y fija la versión

El título histórico nombra Next.js 15. El ejemplo utiliza el contrato asíncrono de params de 15, compatible con las versiones posteriores; el acceso síncrono antiguo era transitorio. Anota las versiones del proyecto y conserva el lockfile. En app/layout.tsx exporta un componente que reciba children: React.ReactNode y devuelva html con lang="es", body, navegación y children. Si usas src/app, mantén todas las rutas en ese árbol. Visitar un slug solo demuestra la captura del segmento: antes de mostrar un artículo real debes buscarlo y usar notFound() cuando no exista.

Servidor que produce HTML y navegador que lo muestra y gestiona la interacción; claves sensibles permanecen en el servidor. — **Dónde se ejecuta cada parte**
El servidor puede obtener datos y producir el HTML inicial. El navegador muestra el resultado y ejecuta las interacciones que necesitan estado local. Mantén las claves sensibles en el servidor y define qué parte se ejecuta en cada entorno.
Ver la infografía en tamaño completo ↗

Fuentes para profundizar

Next.js 15: actualización y params ↗

Concepto clave

El App Router en Next.js 15 representa un cambio fundamental en cómo estructuramos aplicaciones web. Imagina que estás construyendo una casa: antes tenías que decidir dónde poner cada habitación desde el principio, pero ahora tienes un sistema modular donde cada habitación se construye independientemente y se conecta automáticamente. El App Router funciona así: cada carpeta en tu proyecto se convierte en una ruta, y los archivos dentro definen el contenido y comportamiento de esa página.

Los Server Components son componentes React que se renderizan exclusivamente en el servidor. Piensa en ellos como chefs en una cocina profesional: preparan todo lo necesario (datos, HTML) antes de servir el plato al cliente. Esto elimina la necesidad de enviar JavaScript innecesario al navegador y mejora el rendimiento inicial. En Next.js 15, todos los componentes son Server Components por defecto, a menos que explícitamente los marques como client components.

Cómo funciona en la práctica

Para configurar el App Router en Next.js 15, sigue estos pasos:

Crea un nuevo proyecto con npx create-next-app@latest y selecciona las opciones para App Router
Observa la estructura generada: tendrás una carpeta app en la raíz
Dentro de app, crea carpetas para tus rutas. Por ejemplo: app/dashboard para la ruta /dashboard
En cada carpeta de ruta, crea un archivo page.js que exporte un componente React
Configura el layout global en app/layout.js y los metadatos en app/metadata.js

Ejemplo básico de estructura:

app/
  layout.js
  page.js
  dashboard/
    page.js
    settings/
      page.js
  api/
    users/
      route.js

Caso de estudio

Vamos a construir un dashboard de administración para una tienda online. Necesitamos:

Página principal (/): muestra estadísticas generales
Página de productos (/products): lista todos los productos
Página de pedidos (/orders): muestra pedidos recientes
API para productos (/api/products): endpoint REST

Estructura resultante:

Carpeta	Archivo	Propósito
app/	layout.js	Layout global con navegación
app/	page.js	Página principal con estadísticas
app/products/	page.js	Lista de productos (Server Component)
app/orders/	page.js	Tabla de pedidos
app/api/products/	route.js	Endpoint API para productos

Los Server Components pueden hacer fetch de datos directamente sin useEffect, simplificando considerablemente el código.

Errores comunes

Mezclar Server y Client Components incorrectamente: No puedes usar hooks como useState en Server Components. Si necesitas interactividad, marca el componente con 'use client' en la primera línea.
Estructura de carpetas incorrecta: El App Router requiere que las rutas sean carpetas con archivos page.js. No uses archivos con otros nombres para definir rutas.
Olvidar el layout.js: Cada carpeta puede tener su propio layout.js que se aplica a todas las subrutas. Si no lo defines, se usa el layout más cercano en la jerarquía.
No aprovechar la carga en streaming: Next.js 15 permite streaming SSR por defecto. Asegúrate de usar Suspense para componentes que cargan datos lentamente.
Configuración incorrecta de metadatos: Los metadatos deben definirse en layout.js o page.js usando export const metadata, no en componentes regulares.

Checklist de dominio

Puedo crear una nueva aplicación Next.js 15 con App Router desde cero
Entiendo la diferencia entre Server Components y Client Components
Sé estructurar rutas anidadas usando carpetas en el directorio app
Puedo configurar un layout global y layouts específicos por ruta
Sé crear API routes dentro del App Router
Puedo implementar streaming SSR usando Suspense
Entiendo cómo los Server Components mejoran el rendimiento inicial

Configura una aplicación de blog con App Router

En este ejercicio, crearás la estructura básica de un blog usando el App Router de Next.js 15. Sigue estos pasos:

Crea un nuevo proyecto Next.js 15 usando el comando oficial de creación
Configura la estructura de carpetas dentro de app para las siguientes rutas:
- / (página principal del blog)
- /blog (lista de artículos)
- /blog/[slug] (página individual de artículo)
- /about (página acerca de)
Crea un layout global en app/layout.js que incluya:
- Un header con navegación a las páginas principales
- Un footer con información de copyright
En app/blog/[slug]/page.js, implementa un Server Component que:
- Reciba el parámetro slug de la URL
- Simule la carga de datos de un artículo (puedes usar datos mock)
- Muestre el título y contenido del artículo
Agrega un archivo app/api/articles/route.js que devuelva una lista de artículos en formato JSON

Pistas

Recuerda que los parámetros dinámicos en rutas se definen con carpetas entre corchetes, como [slug]
Puedes usar fetch directamente en Server Components sin async/await adicional
Para el layout global, exporta un componente React que reciba children como prop

Evalua tu comprension

Completa el quiz interactivo de arriba para ganar XP.

Práctica acompañada: Una interfaz web de principio a fin

Estado, formularios y una API pequeña. Usa este cuaderno como práctica complementaria de la ruta; el material original de la lección continúa siendo tu referencia.

Estado, formularios y una API pequeña: HTML, Estado, Validación, Respuesta — De la idea al resultado: una secuencia para practicar y revisar.

Práctica: cuatro pruebas de comportamiento

Prueba un título normal, solo espacios, 121 caracteres y una falla de red simulada. Registra la respuesta y el estado de la interfaz. Repite usando solo teclado: debes llegar al campo, enviarlo y encontrar el error sin usar el ratón.

Después agrega una segunda tarea y cambia el orden de la lista. Comprueba que cada botón sigue actuando sobre el elemento correcto. Si trabajas con microservicios, dibuja qué servicio posee el dato y qué ocurre si la dependencia no responde. No necesitas una infraestructura distribuida para aprender a definir tiempos de espera y errores comprensibles.

Comprueba tu entrega

Entrega el código, el contrato de API y evidencia de las cuatro pruebas. Indica si los datos se guardan o desaparecen al recargar. Una demostración en memoria debe decirlo para que nadie confunda un prototipo con almacenamiento persistente.

Sigue con Next.js 15: Aplicaciones Full-Stack con Server Components y Streaming SSR

Esta lección forma parte de un curso de Cursalo. Revisa su programa y elige entre la compra individual o el acceso a toda la escuela.

Ver curso y opciones de acceso Ya soy estudiante

Si ya tenías acceso a este curso, entra con tu cuenta: tus derechos y tu progreso se conservan. No necesitas comprarlo de nuevo.

Siguiente: Diferencias entre Server y Client Components →Entrar y guardar mi progreso