Next.js ima dva sistema usmerjanja. Pages Router (pages/) je originalni; App Router (app/, od Next 13 dalje) je novejši, priporočeni sistem, zgrajen okrog React Server Components.
Next.js ima dva sistema usmerjanja. Pages Router (pages/) je originalni; App Router (app/, od Next 13 dalje) je novejši, priporočeni sistem, zgrajen okrog 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>;
}
V App Routerju so komponente Server Components privzeto — delujejo na strežniku, lahko neposredno await podatke in pošljejo nič JS-ja za to komponento v brskalnik. Pages Router je namesto tega uporabljal posebne funkcije (getServerSideProps) za prehod podatkov v strani, upodobljene na odjemalcu.
layout.tsx).loading.tsx / Suspense.Za nove projekte uporabite App Router — to je kraj, na katerega se osredotoča razvoj Next.js. Pages Router je še vedno podprt (in oba lahko sočasno obstajata v eni aplikaciji), vendar je v bistvu v načinu vzdrževanja.
App Router predstavlja trenutno arhitekturo Next.js (Server Components, ugnezdeni layouts, streaming).
Znati, kako se razlikuje od zastarele Pages Routerja — posebej privzeti server-prvi pristop in model layout — je bistveno za delo v katerem koli sodoben Next.js codebasu.