Next.js har to rutingssystemer. Pages Router (pages/) er den originale; App Router (app/, siden Next 13) er den nyere, anbefalte varianten bygget rundt 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 kjøres på serveren, kan await data direkte, og sender null JS for den komponenten til nettleseren. Pages Router brukte i stedet spesielle funksjoner (getServerSideProps) for å sende data til klient-renderte sider.
layout.tsx).loading.tsx / Suspense.Bruk App Router for nye prosjekter — det er hvor Next.js-utvikling fokuseres. Pages Router støttes fortsatt (og de to kan eksistere sammen i en app), men er i praksis i vedlikeholdsmodus.
App Router representerer Next.js' nåværende arkitektur (Server Components, nested layouts, streaming).
Å forstå hvordan den skiller seg fra den eldre Pages Router — spesielt server-først standardinnstilling og layout-modellen — er essensielt for å arbeide i enhver moderne Next.js-kodebase.
Et bibliotek av IT-intervjuspørsmål med detaljerte svar — fra Junior til Senior.
Doner