Next.js 15: Guía completa de App Router

Next.js 15 ha consolidado el App Router como el estándar para construir aplicaciones React modernas. En esta guía, exploraremos todo lo que necesitas saber.

¿Qué es el App Router?

El App Router es el nuevo sistema de enrutamiento de Next.js basado en el directorio app/. Introduce conceptos revolucionarios como:

• Server Components por defecto

• Streaming y Suspense integrados

• Layouts anidados

• Loading y Error boundaries automáticos

Estructura básica

app/ ├── layout.tsx      # Layout raíz ├── page.tsx        # Página principal ├── loading.tsx     # UI de carga ├── error.tsx       # Manejo de errores ├── blog/ │   ├── page.tsx    # /blog │   └── [slug]/ │       └── page.tsx # /blog/:slug

Server Components vs Client Components

Esta es la distinción más importante en Next.js 15:

// Server Component (por defecto) async function BlogPosts() {   const posts = await fetchPosts(); // Fetch directo en el servidor   return (     <ul>       {posts.map(post => (         <li key={post.id}>{post.title}</li>       ))}     </ul>   ); }

'use client';
// Client Component function LikeButton({ postId }: { postId: string }) {   const [likes, setLikes] = useState(0);      return (     <button onClick={() => setLikes(l => l + 1)}>       ❤️ {likes}     </button>   ); }

Tip: Usa Server Components siempre que sea posible. Solo añade 'use client' cuando necesites interactividad.

Patrones avanzados

Parallel Routes

app/ ├── @modal/ │   └── login/ │       └── page.tsx ├── @sidebar/ │   └── page.tsx └── layout.tsx

Intercepting Routes

Perfecto para modales que también funcionan como páginas completas.

Conclusión

El App Router representa el futuro del desarrollo con React. La curva de aprendizaje inicial vale completamente la pena.