Next.js ima dva sustava rutiranja. Pages Router (pages/) je originalni; App Router (app/, od Next 13) je novi, preporučeni sustav izgrađen oko React Server Components.
Next.js ima dva sustava rutiranja. Pages Router (pages/) je originalni; App Router (app/, od Next 13) je novi, preporučeni sustav izgrađen oko 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>;
}
U App Router-u, komponente su Server Components zadano — izvršavaju se na poslužitelju, mogu direktno await podatke, i šalju nula JS-a za tu komponentu u preglednik. Pages Router je umjesto toga koristio posebne funkcije (getServerSideProps) da proslijedi podatke na stranice koje se renderiraju na klijentskoj strani.
layout.tsx).loading.tsx / Suspense.Koristite App Router za nove projekte — to je gdje je fokus razvoja Next.js. Pages Router je još uvijek podržan (i dvije mogu koegzistirati u istoj aplikaciji) ali je u biti u modu održavanja.
App Router predstavlja trenutnu arhitekturu Next.js (Server Components, ugniježđeni rasporedi, streaming).
Znati kako se razlikuje od naslijeđenog Pages Router-a — posebno server-first zadanu vrijednost i model rasporeda — bitno je za rad u bilo kojoj modernoj Next.js bazi koda.
Knjižnica IT pitanja za razgovore za posao s detaljnim odgovorima — od Juniora do Seniora.
Doniraj