Wat is het verschil tussen de App Router en de Pages Router?

Question

Accepted Answer

Next.js heeft **twee routeringssystemen**. De **Pages Router** (`pages/`) is de originele; de **App Router** (`app/`, sinds Next 13) is de nieuwere, aanbevolen versie gebouwd rond React Server Components. ## Verschil in bestanden en conventies ```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 ``` ## De belangrijkste conceptuele verschuiving: 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}

; } ``` In de App Router zijn components **standaard Server Components** — ze draaien op de server, kunnen direct `await` data gebruiken, en sturen nul JS voor die component naar de browser. De Pages Router gebruikte in plaats daarvan speciale functies (`getServerSideProps`) om data door te geven aan client-rendered pagina's. ## Wat de App Router toevoegt - **Nested layouts** die behouden blijven tijdens navigatie (`layout.tsx`). - **Server Components** (minder client JS, directe data-toegang). - **Streaming** met `loading.tsx` / Suspense. - **Server Actions** voor mutaties zonder API routes. ## Welke gebruiken Gebruik de **App Router** voor nieuwe projecten — dat is waar Next.js-ontwikkeling op gericht is. De Pages Router wordt nog steeds ondersteund (en beide kunnen naast elkaar in één app bestaan), maar is in wezen in onderhoudsmodus. ## Waarom het belangrijk is De App Router vertegenwoordigt Next.js' huidige architectuur (Server Components, nested layouts, streaming). Het begrijpen hoe het verschilt van de legacy Pages Router — vooral het server-first standaard en het layout-model — is essentieel voor het werken in elke moderne Next.js-codebase.