Next.js ha due sistemi di routing. Il Pages Router (pages/) è l'originale; l'App Router (app/, da Next 13) è il più recente, consigliato, costruito attorno ai 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>;
}
Nell'App Router, i componenti sono Server Components per impostazione predefinita — vengono eseguiti sul server, possono await i dati direttamente e inviano zero JS per quel componente al browser. Il Pages Router invece utilizzava funzioni speciali (getServerSideProps) per passare i dati nelle pagine rese dal client.
layout.tsx).loading.tsx / Suspense.Utilizza l'App Router per i nuovi progetti — è dove lo sviluppo di Next.js è focalizzato. Il Pages Router è ancora supportato (e i due possono coesistere in un'app) ma è essenzialmente in modalità di manutenzione.
L'App Router rappresenta l'architettura attuale di Next.js (Server Components, layout annidati, streaming).
Sapere come differisce dal Pages Router legacy — in particolare il default server-first e il modello di layout — è essenziale per lavorare in qualsiasi codebase Next.js moderno.