Next.js App Router vs Pages Router: Što koristiti u 2026?

Next.js se razvija jako brzo, a jedno od najčešćih pitanja u 2026. i dalje je:

Treba li graditi na App Routeru (`/app`) ili na Pages Routeru (`/pages`)?

Ako pokrećete novi projekt, odgovor je često jednostavan. Ako održavate zrelu codebase bazu, stvar je nijansiranija. Ovaj vodič fokusira se na praktično donošenje odluka: arhitekturu, performanse, developer iskustvo, SEO i rizik migracije.

---

Kratki sažetak

- Odaberite App Router ako gradite nešto novo, želite moderne React mogućnosti (Server Components) i stalo vam je do dugoročne održivosti.

- Odaberite Pages Router ako održavate stariji projekt, jako se oslanjate na `getServerSideProps` ili trebate put s najmanjim rizikom i minimalnim refaktoriranjem.

---

Što se promijenilo: `/pages` vs `/app`

Pages Router (klasični)

Pages Router je izvorni Next.js pristup:

- File-based rute u `pages/`

- Dohvat podataka kroz `getStaticProps`, `getServerSideProps` i `getStaticPaths`

- Globalni wrapperi kroz `_app.tsx` i `_document.tsx`

Stabilan je, predvidljiv i još uvijek široko korišten, posebno u dugotrajnim proizvodima.

App Router (moderni)

App Router je uveo novu arhitekturu:

- Rute žive u `app/`

- Ugniježđeni layouti kroz `layout.tsx`

- Bolja podrška za streaming i server-first renderiranje

- React Server Components (RSC) kao ključni koncept

- Novi obrasci: `loading.tsx`, `error.tsx`, `not-found.tsx`, route grupe i server actions

Ako ste se ikad borili s kompleksnim layout kompozicijama u Pages Routeru, App Router je veliki iskorak.

---

Ključne razlike koje su bitne u stvarnim projektima

1) Model renderiranja i performanse

Pages Router: najčešće birate SSR/SSG/ISR po stranici. Jasno je, ali često završite sa slanjem previše JavaScripta.

App Router: potiče server-first pristup.

- Server Components renderiraju se na serveru i ne šalju JS po defaultu

- Klijentsku interaktivnost dodajete samo gdje treba (`"use client"`)

Praktičan učinak: manje klijentskog JS-a, brže inicijalno učitavanje i bolji Core Web Vitals, posebno za content-heavy stranice.

---

2) Pristup dohvaćanju podataka

Pages Router: dohvat podataka je vezan uz Next.js funkcije:

- `getServerSideProps()`

- `getStaticProps()`

App Router: dohvat podataka više izgleda kao standardni React + platform primitives:

- `async` komponente na serveru

- `fetch()` s kontrolama cacheiranja

- smještanje zahtjeva za podacima bliže samom UI-ju

Praktičan učinak: čišća arhitektura za mnoge timove, ali migracija traži promjenu postojećih obrazaca.

---

3) Layouti i dijeljeni UI

Pages Router: obrasci dijeljenih layouta često se oslanjaju na `_app.tsx` i ručnu kompoziciju. Ugniježđeni layouti su mogući, ali nisu “native”.

App Router: ugniježđeni layouti su first-class:

- `app/layout.tsx` (globalni)

- `app/(group)/layout.tsx` (sekcijski layout)

- `template.tsx` ako želite re-mount ponašanje

Praktičan učinak: kompleksne aplikacije (dashboardi, admin, višekoračni flowovi) lakše je strukturirati.

---

4) Loading stanja i error handling

Pages Router: loading stanja obično implementirate ručno (npr. client-side fetch ili route-level spinneri).

App Router: ima route-level UX primitive:

- `loading.tsx` za trenutne skeleton prikaze

- `error.tsx` za route error boundary

- `not-found.tsx` za custom 404 po segmentu

Praktičan učinak: bolji UX uz manje boilerplate koda.

---

5) SEO i metadata

Pages Router: mnogi projekti i dalje koriste `next/head` obrasce.

App Router: metadata je standardizirana:

- `export const metadata = { ... }`

- dinamički metadata podaci kroz `generateMetadata()`

Praktičan učinak: konzistentnija SEO implementacija kroz rute.

---

Što odabrati u 2026?

Odaberite App Router ako:

- Pokrećete novi Next.js projekt

- Želite prednosti Server Components

- Stalo vam je do performansi i smanjenja poslanog JS-a

- Aplikaciji trebaju ugniježđeni layouti i moderni routing obrasci

- Želite se uskladiti sa smjerom u kojem ide Next.js

Odaberite Pages Router ako:

- Codebase vam je stabilan i želite minimalan rizik

- Imate puno poslovne logike oko `getServerSideProps`

- Timu treba najpoznatiji, battle-tested pristup

- Imate kratak rok i migracija bi vas usporila

---

Strategija migracije (sigurna i realna)

Ne morate “prepisati sve”.

Korak 1: Krenite s jednom rutom

Prvo premjestite rutu niskog rizika, npr. marketing stranicu ili jednostavniji dashboard dio.

Korak 2: Privremeno držite oba routera

Next.js podržava `pages/` i `app/` paralelno. To je idealno za postupno usvajanje.

Korak 3: Postupno mijenjajte obrasce

- Zamijenite `next/head` s App Router metadata pristupom

- Zamijenite `getServerSideProps` sa server-side `fetch()` obrascima

- Premjestite shared layoute u `app/layout.tsx`

Korak 4: Dodajte client komponente samo gdje trebaju

Nemojte sve po defaultu označiti s `"use client"`. Time gubite velik dio prednosti App Routera.

---

Česte greške timova s App Routerom

1. Pretvaranje svega u Client Components

- Poslat ćete previše JS-a i izgubiti performansne dobitke.

2. Tretiranje Server Components kao “SSR stranica”

- RSC nije isto što i SSR. Razmišljajte “server-first UI kompozicija”.

3. Neuredna arhitektura

- App Router može postati kaotičan ako rano ne definirate folder konvencije (route grupe, feature folderi itd.).

---

Završna preporuka

U 2026., ako gradite novi proizvod, App Router je najčešće ispravan default.

Pages Router i dalje ima svoje mjesto, posebno u legacy projektima, ali ako želite moderne React primitive, bolje performanse i dugoročno usklađivanje sa smjerom Next.js-a, App Router je pametnija investicija.

Ako niste sigurni, krenite hibridno: zadržite stabilan Pages Router i migrirajte rutu po rutu.

---

Jednostavno pravilo odluke

Ako je ovo novi projekt → App Router.

Ako je ovo zreo projekt s jakim oslanjanjem na `getServerSideProps` → razmotrite ostanak na Pages Routeru dok ne možete migrirati postupno.