React i Next.js — web aplikacije visokih performansi
React 18 i Next.js 15 (App Router) koristimo za sve frontend projekte: od prezentacijskih web-stranica do složenih SaaS aplikacija s desetinama hiljada korisnika. Kod je u strogom TypeScriptu, testovi su automatizirani.
Zašto Next.js za naše projekte
Next.js 15 s App Routerom nudi jedinstven hibridni model: statične stranice (SSG) isporučuju se trenutno s CDN-a, dinamične stranice rade kao Server Components koje pretraživaču ne šalju nepotreban JavaScript, a stranice u realnom vremenu koriste izolirane Client Components.
Slike se automatski optimiziraju putem komponente `<Image>` (WebP/AVIF, responzivni srcSet, lazy-loading), fontovi se ugrađuju u kritični CSS pomoću `next/font`, a skripte trećih strana učitavaju se prioritetnim strategijama.
- Server Components za marketinške stranice — nula klijentskog JS-a, potpun HTML sa servera
- Streaming SSR sa Suspense za nadzorne ploče s podacima uživo
- Incremental Static Regeneration (ISR) za poludinamični sadržaj
- Route Groups i Parallel Routes za složene layoute bez ponovnog renderiranja
Strogi TypeScript — bez tihih grešaka
Svi naši projekti koriste TypeScript s `strict: true`, `noImplicitAny`, `exactOptionalPropertyTypes` i `noUncheckedIndexedAccess`. Ove postavke još pri kompajliranju blokiraju čitave kategorije grešaka u radu: pristup nedefiniranim vrijednostima, nepotpune tipove u odgovorima API-ja, pogrešna poređenja. Tipičan projekat ima 0 TypeScript grešaka u CI-ju prije bilo kojeg testa.
Za upravljanje stanjem koristimo Zustand (lagan, bez suvišnog koda) ili React Context za lokalno stanje. Dohvaćanje podataka vodi TanStack Query (automatski keš, pametna invalidacija, stale-while-revalidate). Forme rade s React Hook Form + Zod validacijom šema — sinhrona i asinhrona validacija bez dupliciranog koda.
- ESLint s prilagođenim pravilima za zabranjene obrasce (any, console.log, magični stringovi)
- Prettier s jedinstvenom konfiguracijom — nijedan PR se ne odbija zbog formatiranja
- Zod za validaciju podataka iz vanjskih API-ja u toku rada
- Path aliasi (`@/components/...`) — čisti importi bez `../../..`
Automatizirano testiranje i CI/CD
Unit testovi s Vitestom (brz, kompatibilan s Jest API-jem), testovi komponenti s React Testing Library, E2E s Playwrightom na 3 pretraživača (Chromium, Firefox, WebKit). GitHub Actions pipeline pokreće sve testove na svakom PR-u; spajanje je blokirano ako bilo koji padne. Minimalno 80% pokrivenosti poslovne logike.
- Lighthouse CI — mjerenje performansi pri svakoj staging isporuci
- Automatski analizator bundlea — upozorenje ako bundle naraste >5% u odnosu na main
- Storybook za UI komponente — živa vizualna dokumentacija
Prednosti i nedostaci
Prednosti
- Ugrađena optimizacija slika (WebP/AVIF) i fontova (next/font), bez ručnog podešavanja.
- Izvorni SSR i SSG — potpuni HTML za Google i AI pretraživače.
- Strogi TypeScript hvata greške pri kompajliranju, a ne u produkciji.
- Zreo ekosistem: Vercel, hiljade paketa, ogromna zajednica.
Ograničenja
- Krivulja učenja za App Router i Server Components je strma.
- Česte nekompatibilne promjene između glavnih verzija — potrebno je održavanje.
- Za jednostavnu statičnu web-stranicu Next.js može biti pretjeran u odnosu na čisti HTML.
- Veliki buildovi povećavaju vrijeme kompajliranja i trošak CI-ja.
Brzi zaključak
Odaberite React i Next.js za web-stranice i web aplikacije koje moraju biti brze, indeksirane i skalabilne. Za jednu statičnu odredišnu stranicu bez interaktivnosti dovoljan je jednostavniji alat.
Tabela specifikacija
| Mogućnost | Ograničenje / prag | Tipična upotreba | |
|---|---|---|---|
| Renderiranje | SSR, SSG, ISR, CSR | Server Components ograničavaju API-je pretraživača | Statični marketing + dinamična nadzorna ploča |
| Performanse | Optimizacija slika i fontova, manje klijentskog JS-a | Hydration JS raste s interaktivnošću | Web-stranice s velikim prometom i kritičnim SEO-om |
| Skaliranje | Desetine hiljada korisnika, edge CDN | Potreban je Node ili serverless hosting | SaaS, portali, e-trgovina |
| Tipični trošak | Open-source, hosting od ~€0 | Serverless funkcije se naplaćuju po upotrebi | Od malih projekata do enterprise rješenja |
Next.js naspram alternativa
| Kriterij | Next.js | Nuxt / Astro / Vite |
|---|---|---|
| SSR + SSG u jednom frameworku | Da, izvorno | Djelimično (Nuxt da, Vite ne) |
| React ekosistem | Potpun | Vue (Nuxt) ili više frameworka (Astro) |
| Najbolje za čistu statičnu web-stranicu | Dobro | Astro je lakši |
Često postavljana pitanja
Zašto Next.js, a ne čisti React (Vite)?
React s Viteom renderira samo na klijentu, pa je početni HTML prazan — loše za SEO i GEO. Next.js dodaje SSR i SSG i isporučuje potpun HTML već u prvom odgovoru servera.
Je li Next.js dobar za SEO?
Da. SSR/SSG isporučuje indeksirljiv HTML, a metapodaci i JSON-LD generiraju se na serveru i nalaze se u početnom HTML-u svake stranice.
Mogu li postojeću web-stranicu migrirati na Next.js?
Da, postupno: stranice se prebacuju jedna po jedna, uz zadržavanje URL-ova i 301 preusmjeravanja kako se ne bi izgubile pozicije na Googleu.
Kakav hosting treba Next.js?
Statične stranice rade na bilo kojem CDN-u. Dinamične funkcije (SSR, API rute) zahtijevaju Node.js ili serverless okruženje poput Vercela, Netlifyja ili Docker kontejnera.