Što je Next.js i što dodaje preko React-a?

Question

Accepted Answer

**Next.js** je full-stack React **framework**. React sam po sebi je samo UI biblioteka — renderira komponente ali vam ostavlj routing, dohvat podataka, serverski rendering i build alate. Next.js pruža sve to od početka, plus server runtime. ## Što React ostavlja (i Next.js dodaje) ```text React (library) → Next.js (framework) adds: ────────────────────────────────────────────────── UI rendering only → File-based routing (folders = routes) Client-side rendering → Server rendering (SSR), static generation (SSG), ISR You wire data fetching → Built-in data fetching + caching No backend → API routes / Route Handlers (full-stack) Manual bundling → Zero-config build, code splitting, optimization Manual → next/image (auto-optimized images), next/font ``` ## Konkretan primjer: ruta je samo datoteka ```tsx // app/about/page.tsx → automatically served at /about export default function About() { return

About us

; } ``` U čistom React-u trebali biste instalirati router, konfigurirati rute i postaviti build. U Next.js-u, stvaranje datoteke *je* ruta. ## Zašto timovi to biraju - **SEO & performanse** — server-rendered HTML znači da je sadržaj u početnom odgovoru (dobro za crawlere i brzo prvo slikanje), za razliku od React SPA samo na klijenta koji šalje praznu stranicu a zatim hidratira. - **Full-stack u jednom projektu** — frontend i backend (API routes, Server Actions) žive zajedno. - **Production-ready zadane vrijednosti** — automatsko dijeljenje koda, optimizacija slike/fonta, cache. ## Zašto je to važno Next.js je najpopularniji React framework jer React pretvara iz UI biblioteke u kompletnu application platformu — otvarajući strategiju renderiranja, routing, podatke i backend kako biste se fokusirali na značajke umjesto instalacija. To je zadani izbor kada trebate SEO, performanse ili serversku logiku s React-om.