React i Next.js — vrlo performantne web-aplikacije
Za sve frontend projekte koristimo React 18 i Next.js 15 (App Router): od prezentacijskih web-stranica do složenih SaaS-ova s desecima tisuća korisnika. Kod je strogi TypeScript, a testovi su automatizirani.
Zašto Next.js za naše projekte
Next.js 15 s App Routerom nudi jedinstven hibridni model: statičke stranice (SSG) poslužuju se s CDN-a, dinamičke stranice izvode Server Components koji pregledniku ne šalju nepotreban JavaScript, a stranice s podacima u stvarnom vremenu koriste izolirane Client Components.
Slikovne datoteke automatski se optimiziraju komponentom `<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 JS-a na klijentu
- Streaming SSR sa Suspenseom za nadzorne ploče s podacima uživo
- Incremental Static Regeneration (ISR) za poludinamički sadržaj
- Route Groups i Parallel Routes za složene layoute bez ponovnog renderiranja
Strogi TypeScript — bez tihih bugova
Svi naši projekti koriste TypeScript s `strict: true`, `noImplicitAny`, `exactOptionalPropertyTypes` i `noUncheckedIndexedAccess`. Te postavke pri kompajliranju blokiraju cijele kategorije runtime bugova: pristup undefined vrijednostima, nepotpune tipove u API odgovorima, pogrešne usporedbe. Tipičan projekt u CI-ju ima 0 TypeScript pogrešaka prije bilo kojeg testa.
Za upravljanje stanjem koristimo Zustand (lagan, bez boilerplatea) ili React Context za lokalno stanje. Dohvaćanje podataka vodi TanStack Query (automatski cache, pametna invalidacija, stale-while-revalidate). Obrasci se rade s React Hook Formom i Zod validacijom sheme — sinkrona i asinkrona validacija bez dupliciranog koda.
- ESLint s prilagođenim pravilima za zabranjene obrasce (any, console.log, magic strings)
- Prettier s jedinstvenom konfiguracijom — nijedan PR nije odbijen zbog formatiranja
- Zod za validaciju podataka iz vanjskih API-ja u vrijeme izvođenja
- Path aliasi (`@/components/...`) — jasni importi bez `../../..`
Automatizirano testiranje i CI/CD
Unit testovi s Vitestom (brz, kompatibilan s Jest API-jem), testovi komponenti s React Testing Libraryjem, E2E s Playwrightom na 3 preglednika (Chromium, Firefox, WebKit). GitHub Actions pipeline pokreće sve testove na svakom PR-u; spajanje je blokirano ako bilo koji padne. Minimalna pokrivenost je 80% na poslovnoj logici.
- Lighthouse CI — ocjena <90 blokira deploy na staging
- Automatski bundle analyzer — upozorenje ako bundle naraste za >5% u odnosu na main
- Storybook za UI komponente — živa vizualna dokumentacija
Prednosti i ograničenja
Prednosti
- Automatska optimizacija slika (`<Image>`) i fontova (`next/font`) ugrađena u framework.
- Izvorni SSR i SSG — potpun HTML za Google i AI tražilice.
- Strogi TypeScript hvata bugove pri kompajliranju, a ne u produkciji.
- Zreo ekosustav: Vercel, tisuće paketa, golema zajednica.
Ograničenja
- Krivulja učenja za App Router i Server Components je strma.
- Česte promjene između glavnih verzija — zahtijeva održavanje.
- Za jednostavnu statičku stranicu Next.js može biti pretjeran u odnosu na čisti HTML.
- Veliki buildovi povećavaju vrijeme kompajliranja i trošak CI-ja.
Kratak zaključak
Odaberite React & Next.js za web-stranice i aplikacije koje moraju biti brze, indeksirane i skalabilne. Za jednu statičku odredišnu stranicu bez interaktivnosti dovoljno je jednostavnije rješenje.
Tablica specifikacija
| Mogućnost | Granica / prag | Tipična uporaba | |
|---|---|---|---|
| Renderiranje | SSR, SSG, ISR, CSR | Server Components ograničavaju API-je preglednika | Statički marketing + dinamična nadzorna ploča |
| Performanse | SSG, SSR i automatska optimizacija slika | JS za hidrataciju raste s interaktivnošću | Web-stranice s velikim prometom, kritičan SEO |
| Skaliranje | Deseci tisuća korisnika, edge CDN | Zahtijeva Node ili serverless hosting | SaaS, portali, e-trgovina |
| Tipičan trošak | Otvoreni kod, hosting od ~0€ | Serverless funkcije naplaćuju se po korištenju | Od malih projekata do enterprisea |
Next.js u odnosu na alternative
| Kriterij | Next.js | Nuxt / Astro / Vite |
|---|---|---|
| SSR + SSG u jednom frameworku | Da, izvorno | Djelomično (Nuxt da, Vite ne) |
| React ekosustav | Potpun | Vue (Nuxt) ili više frameworka (Astro) |
| Optimalno za čisto statičku stranicu | Dobro | Astro je lakši |
Često postavljana pitanja
Zašto Next.js, a ne običan 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 te isporučuje potpun HTML koji tražilice mogu čitati.
Je li Next.js dobar za SEO?
Da. SSR/SSG isporučuju indeksirani HTML, metapodaci i JSON-LD generiraju se na poslužitelju, a slike i fontovi optimiziraju se automatski.
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 ne biste izgubili pozicije na Googleu.
Kakav hosting treba Next.js?
Statičke stranice rade na bilo kojem CDN-u. Dinamičke funkcije (SSR, API routes) trebaju Node.js ili serverless runtime poput Vercela, Netlifyja ili Docker kontejnera.