A Next.js két útválasztási rendszerrel rendelkezik. A Pages Router (pages/) az eredeti; az App Router (app/, a Next 13 óta) az újabb, ajánlott, amely a React Server Components köré épül.
A Next.js két útválasztási rendszerrel rendelkezik. A Pages Router (pages/) az eredeti; az App Router (app/, a Next 13 óta) az újabb, ajánlott, amely a React Server Components köré épül.
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>;
}
Az App Router-ben az összetevők alapértelmezés szerint Server Components — a szerveren futnak, közvetlenül await adatokat, és nulla JS-t küldenek az összetevőhöz a böngészőbe. A Pages Router ehelyett speciális függvényeket (getServerSideProps) használt az adatok átadásához az ügyféloldalon renderelt oldalaknak.
layout.tsx).loading.tsx / Suspense-sel.Az App Router új projektekhez — ez az, ahol a Next.js fejlesztés fókusza van. A Pages Router még mindig támogatott (és mindkettő egy alkalmazásban létezhet), de lényegében karbantartási módban van.
Az App Router a Next.js jelenlegi architektúráját (Server Components, beágyazott elrendezések, streaming) képviseli.
Annak megértése, hogy hogyan különbözik az örökölt Pages Router-től — különösen a server-first alapértelmezés és az elrendezési modell — elengedhetetlen bármely modern Next.js kódbázisban való munkához.