Next.js tiene dos sistemas de enrutamiento. El Pages Router (pages/) es el original; el App Router (app/, desde Next 13) es el más nuevo y recomendado, construido alrededor de React Server Components.
Next.js tiene dos sistemas de enrutamiento. El Pages Router (pages/) es el original; el App Router (app/, desde Next 13) es el más nuevo y recomendado, construido alrededor de React Server Components.
Pages Router (pages/) App Router (app/)
──────────────────────────────────────────────────────
pages/about.tsx → /about app/about/page.tsx → /about
Default export = page page.tsx = page, layout.tsx = layout
getServerSideProps (SSR) async Server Components (fetch directly)
getStaticProps (SSG) fetch() with caching options
_app.tsx / _document.tsx Nested layout.tsx files
All components client-rendered Server Components by default
// App Router — a Server Component that fetches data directly, no extra API
// app/users/page.tsx
export default async function Users() {
const res = await fetch("https://api.example.com/users"); // runs on the SERVER
const users = await res.json();
return <ul>{users.map(u => <li key={u.id}>{u.name}</li>)}</ul>;
}
En el App Router, los componentes son Server Components por defecto — se ejecutan en el servidor, pueden esperar datos directamente (await), y envían cero JS para ese componente al navegador. En cambio, el Pages Router usaba funciones especiales (getServerSideProps) para pasar datos a páginas renderizadas en el cliente.
layout.tsx) que persisten durante la navegación.loading.tsx / Suspense.Usa el App Router para proyectos nuevos — es donde se enfoca el desarrollo de Next.js. El Pages Router sigue siendo compatible (y ambos pueden coexistir en una misma aplicación), pero está esencialmente en modo mantenimiento.
El App Router representa la arquitectura actual de Next.js (Server Components, layouts anidados, streaming).
Saber cómo difiere del antiguo Pages Router — especialmente el valor predeterminado orientado al servidor y el modelo de layouts — es esencial para trabajar en cualquier codebase moderno de Next.js.