Quelle est la différence entre l'App Router et le Pages Router ?

Question

Accepted Answer

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. ## Différences de fichiers et de conventions ```text 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 ``` ## Le changement conceptuel clé : Server Components ```tsx // 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

{u.name}

; } ``` 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. ## Ce que l'App Router ajoute - **Layouts imbriqués** qui persistent lors de la navigation (`layout.tsx`). - **Server Components** (moins de JS client, accès direct aux données). - **Streaming** avec `loading.tsx` / Suspense. - **Server Actions** pour les mutations sans routes API. ## Lequel utiliser 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. ## Pourquoi c'est important 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.