Uvod
U ovom prvom dijelu lekcije upoznat ćemo se s osnovnim pojmovima vezanim uz Next.js te vidjeti po čemu se razlikuje od dosadašnjeg načina rada uz pomoć Vite-a. Cilj je objasniti glavne funkcionalnosti "Next.js" okvira, koje probleme on rješava te kako će izgledati naš projekt “Pokédex” kroz naredne lekcije.
Next.js
React komponente, props, state i osnovni koncepti koje smo do sada koristili u Vite okruženju ostaju isti i u "Next.js" projektima.
-
Komponente se i dalje pišu kao funkcije (ili klase, iako su funkcijske komponente danas standard).
-
Props služe za prosljeđivanje podataka ugniježđenim (child) komponentama.
-
State definira unutarnje stanje komponente koje se može mijenjati i čija promjena uzrokuje ponovno iscrtavanje (renderiranje) sučelja aplikacije.
Iako ćemo prijeći na Next.js, sve što znate o Reactu i dalje se primjenjuje. Glavna razlika je u tome da Next.js proširuje "osnovni" React projekt s dodatnim funkcionalnostima poput navigacije stranica (file-based routing), poslužiteljskog renderiranja (server-side rendering) i sličnih mogućnosti koje dolaze unaprijed konfigurirane u sklopu "Next.js" projekta.
Ovo su najvažnije funkcionalnosti "Next.js" okvira (framework-a):
-
Server-Side Rendering (SSR) – dijelovi aplikacije renderiraju se na poslužitelju prije slanja korisniku.
-
Static Site Generation (SSG) – stranice se mogu unaprijed generirati prilikom builda, pa ih kasnije možemo vrlo brzo posluživati u obliku statičkog sadržaja.
-
File-based routing – struktura direktorija pages definira URL putanje, što olakšava organizaciju i navigaciju između stranica.
-
API rute – unutar istog projekta možemo pisati back-end logiku (npr. pages/api/podaci.js), bez potrebe za posebnim poslužiteljem.
Ove mogućnosti su ugrađena u sam "Next.js", pa ne trebate ručno konfigurirati Webpack, Babel i slične alate. "Next.js" je zamišljen kao odgovor na mnoge izazove koje "obični" React (u kombinaciji s Vite-om ili drugim bundlerima) ne rješava automatski, već je potrebna instalacija dodatnih biblioteka i paketa. "Next.js" nam u startu pruže sve potrebno za stvaranje vlastite aplikacije.
Usporedba Vite i Next.js
U prethodne tri radionice upoznali smo se sa prednostima Vite projekta:
-
Brz i lagan razvojni poslužitelj (brzo pokretanje i instant osvježavanje promjena (hot reload)).
-
Minimalna konfiguraciju za pokretanje React projekata.
-
Klijentsko renderiranje – svi dijelovi aplikacije se iscrtavaju isključivo na strani klijenta.
Next.js, s druge strane:
-
Dolazi s ugrađenim SSR i SSG mehanizmima.
-
Koristi file-based routing, čime putanje do pojedinačnih stranica dobivamo automatski po imenima datoteka u pages direktoriju (umjesto da ih ručno definiramo kao npr.u React Routeru).
-
Omogućuje API rute – možemo pisati jednostavne endpointe unutar Next.js aplikacije.
Ako usporedimo ova dva pristupa, sigurno je da je u početku Next.js okruženje složenije od Vite-a (jer radi dosta stvari u pozadini) i potrebno je više vremena za upoznati se sa svim funkcionalnostima, ali zauzvrat nudi kompletno rješenje za mnoge potrebe modernih React aplikacija. Ukratko, Vite je izvrstan za brze, male ili client-side orijentirane projekte. Next.js je odlično rješenje kada vam treba nešto više: SEO optimizacija, SSR, lakša izrada produkcijskih aplikacija ili integrirani back-end.
