Next.js hat zwei Routing-Systeme. Der Pages Router (pages/) ist das ursprüngliche; der App Router (app/, seit Next 13) ist das neuere, empfohlene System, das auf React Server Components aufgebaut ist.
Next.js hat zwei Routing-Systeme. Der Pages Router (pages/) ist das ursprüngliche; der App Router (app/, seit Next 13) ist das neuere, empfohlene System, das auf React Server Components aufgebaut ist.
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>;
}
Im App Router sind Komponenten standardmäßig Server Components — sie laufen auf dem Server, können direkt Daten mit await abrufen und senden null JavaScript für diese Komponente an den Browser. Der Pages Router verwendete stattdessen spezielle Funktionen (getServerSideProps), um Daten an clientseitig gerenderte Seiten zu übergeben.
layout.tsx), die über die Navigation bestehen bleiben.loading.tsx / Suspense.Verwenden Sie den App Router für neue Projekte — hier konzentriert sich die Next.js-Entwicklung. Der Pages Router wird immer noch unterstützt (und beide können in einer App koexistieren), befindet sich aber im Grunde im Wartungsmodus.
Der App Router repräsentiert die aktuelle Architektur von Next.js (Server Components, verschachtelte Layouts, Streaming).
Zu wissen, wie er sich vom alten Pages Router unterscheidet — besonders die serverorientierte Standardeinstellung und das Layout-Modell — ist für die Arbeit in jeder modernen Next.js-Codebase unverzichtbar.