Configuración inicial y estructura del App Router

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:

1. Crea un nuevo proyecto con npx create-next-app@latest y selecciona las opciones para App Router
2. Observa la estructura generada: tendrás una carpeta app en la raíz
3. Dentro de app, crea carpetas para tus rutas. Por ejemplo: app/dashboard para la ruta /dashboard
4. En cada carpeta de ruta, crea un archivo page.js que exporte un componente React
5. 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:

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

Errores comunes

1. 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.
2. 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.
3. 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.
4. 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.
5. 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