Next.js har to routingsystemer. Pages Router (pages/) er det oprindelige; App Router (app/, siden Next 13) er det nyere, anbefalede system bygget omkring 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>;
}
I App Router er komponenter Server Components som standard — de kører på serveren, kan direkte await data og sender nul JS for den komponent til browseren. Pages Router brugte i stedet spécielle funktioner (getServerSideProps) til at videregive data til klient-renderede sider.
layout.tsx).loading.tsx / Suspense.Brug App Router til nye projekter — det er hvor Next.js-udvikling er fokuseret. Pages Router er stadig understøttet (og de to kan eksistere side om side i én app), men er i det væsentlige i vedligeholdelsestilstand.
App Router repræsenterer Next.js's nuværende arkitektur (Server Components, indlejrede layouts, streaming).
At vide hvordan det adskiller sig fra det gamle Pages Router — især server-først-standarden og layout-modellen — er afgørende for at arbejde i enhver moderne Next.js-codebase.