Koja je razlika između App Router-a i Pages Router-a?

Question

Accepted Answer

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. ## Razlike u datotekama i konvencijama ```text 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 ``` ## Ključna konceptualna promjena: Server Components ```tsx // 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

{u.name}

; } ``` 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. ## Što App Router dodaje - **Ugniježđeni rasporedi** koji se zadržavaju tijekom navigacije (`layout.tsx`). - **Server Components** (manje klijentskog JS-a, direktan pristup podacima). - **Streaming** sa `loading.tsx` / Suspense. - **Server Actions** za mutacije bez API ruta. ## Koju koristiti 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. ## Zašto je to važno 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.