React i Next.js — Visokoperformansne web aplikacije
React 18 i Next.js 15 (App Router) koristimo za sve frontend projekte: od prezentacionih sajtova do složenih SaaS aplikacija sa desetinama hiljada korisnika. Kôd je u strogom TypeScriptu, testovi su automatizovani.
Zašto Next.js za naše projekte
Next.js 15 sa App Routerom nudi jedinstven hibridni model: statičke stranice (SSG) isporučuju se trenutno sa CDN-a, dinamičke stranice rade kao Server Components koje pregledaču ne šalju nepotreban JavaScript, a stranice u realnom vremenu koriste izolovane Client Components.
Slike se automatski optimizuju preko 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 prema strategijama prioriteta.
- Server Components za marketinške stranice — nula klijentskog JS-a, kompletan HTML sa servera
- Streaming SSR sa Suspense za kontrolne table sa podacima uživo
- Incremental Static Regeneration (ISR) za poludinamički sadržaj
- Route Groups i Parallel Routes za složene rasporede bez ponovnog renderovanja
Strogi TypeScript — bez tihih grešaka
Svi naši projekti koriste TypeScript sa `strict: true`, `noImplicitAny`, `exactOptionalPropertyTypes` i `noUncheckedIndexedAccess`. Ove postavke u fazi kompajliranja blokiraju čitave kategorije grešaka u izvršavanju: pristup nedefinisanim 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. Dobavljanje podataka vodi TanStack Query (automatski keš, pametna invalidacija, stale-while-revalidate). Formulari koriste React Hook Form + Zod šeme validacije — sinhrona i asinhrona validacija bez dupliranog koda.
- ESLint sa prilagođenim pravilima za zabranjene obrasce (any, console.log, magični stringovi)
- Prettier sa jedinstvenom konfiguracijom — nijedan PR se ne odbija zbog formatiranja
- Zod za validaciju podataka iz spoljnih API-ja u vrijeme izvršavanja
- Aliasi putanja (`@/components/...`) — čisti importi bez `../../..`
Automatsko testiranje i CI/CD
Unit testovi sa Vitestom (brz, kompatibilan sa Jest API-jem), testovi komponenti sa React Testing Library, E2E sa Playwrightom u 3 pregledač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 — ocjena <90 blokira isporuku na staging
- Automatski analizator bundla — upozorenje ako bundle poraste >5% u odnosu na main
- Storybook za UI komponente — živa vizuelna dokumentacija
Prednosti i mane
Prednosti
- Ugrađena optimizacija slika i fontova (komponenta Image, next/font), bez ručnog podešavanja.
- Nativni SSR i SSG — kompletan HTML već u prvom odgovoru servera.
- Strogi TypeScript hvata greške pri kompajliranju, a ne u produkciji.
- Zreo ekosistem: Vercel, hiljade paketa, velika zajednica.
Ograničenja
- Kriva učenja za App Router i Server Components je strma.
- Česte nekompatibilne promjene između glavnih verzija — potrebno je održavanje.
- Za jednostavan statički sajt Next.js može biti pretjeran u odnosu na čist HTML.
- Veliki build-ovi povećavaju vrijeme kompajliranja i trošak CI-ja.
Kratak zaključak
Izaberite React i Next.js za sajtove i web aplikacije koje moraju biti brze, indeksirane i skalabilne. Za jednu statičku odredišnu stranicu bez interaktivnosti dovoljan je jednostavniji alat.
Tabela specifikacija
| Mogućnost | Ograničenje / prag | Tipična upotreba | |
|---|---|---|---|
| Renderovanje | SSR, SSG, ISR, CSR | Server Components ograničavaju API-je pregledača | Statički marketing + dinamička kontrolna tabla |
| Performanse | Ugrađena optimizacija slika, fontova i skripti | JS za hidrataciju raste sa interaktivnošću | Sajtovi sa velikim saobraćajem i kritičnim SEO-om |
| Skaliranje | Desetine hiljada korisnika, edge CDN | Potreban je Node ili serverless hosting | SaaS, portali, e-trgovina |
| Tipičan 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
| Kriterijum | Next.js | Nuxt / Astro / Vite |
|---|---|---|
| SSR + SSG u jednom frameworku | Da, nativno | Djelimično (Nuxt da, Vite ne) |
| React ekosistem | Potpun | Vue (Nuxt) ili više frameworka (Astro) |
| Najbolje za čisto statički sajt | Dobro | Astro je lakši |
Česta pitanja
Zašto Next.js, a ne čist React (Vite)?
React sa Viteom renderuje samo na klijentu, pa je početni HTML prazan — loše za SEO i GEO. Next.js dodaje SSR i SSG i šalje kompletan HTML već u prvom odgovoru servera.
Da li je Next.js dobar za SEO?
Da. SSR/SSG isporučuje indeksirljiv HTML, a metapodaci i JSON-LD generišu se na serveru.
Mogu li postojeći sajt migrirati na Next.js?
Da, postepeno: stranice se prebacuju jedna po jedna, uz zadržavanje URL-ova i 301 preusmjeravanja da se ne izgube pozicije na Googleu.
Kakav hosting treba Next.js?
Statičke stranice rade na bilo kom CDN-u. Dinamičke funkcije (SSR, API rute) zahtijevaju Node.js ili serverless okruženje kao što su Vercel, Netlify ili Docker kontejner.