Next.js har två routningsystem. Pages Router (pages/) är den ursprungliga; App Router (app/, sedan Next 13) är den nyare, rekommenderade konstruerad kring 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 är komponenter Server Components som standard — de körs på servern, kan await data direkt, och skickar noll JS för den komponenten till webbläsaren. Pages Router använde istället speciella funktioner (getServerSideProps) för att överföra data till klientsidorna.
layout.tsx).loading.tsx / Suspense.Använd App Router för nya projekt — det är där Next.js-utvecklingen fokuseras. Pages Router stöds fortfarande (och de två kan samexistera i en app) men är i huvudsak i underhållsläge.
App Router representerar Next.js aktuella arkitektur (Server Components, kapslade layouts, streaming).
Att veta hur det skiljer sig från den gamla Pages Router — särskilt standardinställningen server-först och layoutmodellen — är väsentligt för att arbeta i vilken modern Next.js-kodbas som helst.