Next.js dispose de deux systèmes de routage. Le Pages Router (pages/) est l'original ; l'App Router (app/, depuis Next 13) est le plus récent, recommandé et construit autour des React Server Components.
Next.js dispose de deux systèmes de routage. Le Pages Router (pages/) est l'original ; l'App Router (app/, depuis Next 13) est le plus récent, recommandé et construit autour des 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>;
}
Dans l'App Router, les composants sont des Server Components par défaut — ils s'exécutent sur le serveur, peuvent await des données directement et envoient zéro JS pour ce composant au navigateur. Le Pages Router utilisait plutôt des fonctions spéciales (getServerSideProps) pour transmettre les données aux pages rendues côté client.
layout.tsx).loading.tsx / Suspense.Utilisez l'App Router pour les nouveaux projets — c'est là que le développement de Next.js est focalisé. Le Pages Router est toujours supporté (et les deux peuvent coexister dans une même application) mais est essentiellement en mode maintenance.
L'App Router représente l'architecture actuelle de Next.js (Server Components, layouts imbriqués, streaming).
Comprendre comment il diffère du Pages Router hérité — en particulier le défaut server-first et le modèle de layout — est essentiel pour travailler dans n'importe quelle base de code Next.js moderne.