Instalacija Next.js projekta je prilično jednostavna uz njihovu komandu npx create-next-app@latest “naziv projekta” (bez navodnika).
Navedena komanda će napraviti nov folder sa unešenim nazivom ali pre toga će biti nekoliko pitanja za instalaciju raznih dodataka:
Za sada neka bude Ne jer ne radimo sa velikom količinom podataka pa nam ova vrste provere nije toliko bitna ali je cilj u budućnosti da se prebacimo na Typescript.
Ovaj library služi za “user based” optimizaciju i čist kod, npr. ako postoji varijabla u kodu koja se ne koristi ili recimo import koji nije iskorišćen ESLint će se žaliti.
Nije loša stvar ali ume da bude nekad naporno i u prošlosti je bio loše optimizovan i imao je Memory leak zbog čega nije korišćen u produkciji toliko,
samim tim neka za sad bude Ne ali možda se bude koristio uskoro.
Za sad ovo postaje glavni način stilizacije i zbog toga veliko Da. Rešava se organizacije CSS fajlova i strukture i dodaje dobru organizaciju
stilova za ceo sajt. Treba znati i način stilizovanja sa CSS modulima ali za sada, Tailwind Worship!
Sve vezano za Tailwind videti na njihovom sajtu: https://tailwindcss.com/
Ovo je nešto što se meni lično ne sviđa kod React-a a to je što sve nekako ide u taj src folder koji je onda “root” ali nije.
Zbog toga više volim da su svi folderi (app, public, lib, components…) van tog foldera i stvarno u ROOT projekta što Next.js daje
kao mogućnost i zbog toga je ova stavka stavljena na Ne.
Ovo je sada novi default. Ranije se koristio Pages routing sistem ali posle verzije 12 ili 13, koristi se App folder i s obzirom
da će Pages folder nestati, treba se držati aktuelnih standarda.
Turbopack je Vercel-ov Bundler (kao Webpack) za development environment samim tim trenutni koji se koristi nije loš (ne znam iskreno koji je),
a Turbopack je još uvek u nekoj Beta verziji pa ga ne bih još uvek koristio.
Importovanje je vrlo čisto u Next.js, ako smo duboko u folderima i komponentama u strukturi projekta na primer /app/home/ui/Hero.js, a nama treba
nešto iz /lib/data.json onda ćemo unutar Hero.js fajla importovati sa import data from "@/lib/data.json umesto da izlazimo iz
silnih foldera sa ../../../, simbol @ označava ROOT i iskreno može tako da ostane jer se ne koristi ni za šta drugo.
U slučaju da je prethodno stavljeno na DA ovde će pitati koji drugi simbol bi hteo da se koristi.
Nakon instalacije, komanda generiše folder sa dodeljenim nazivom projekta i onda treba ući u njega i pokrenuti npm run dev komandu da se pokrene dev server.
Ako su se ispoštovale gore navedena podešavanja, struktura će biti vrlo jednostavna:
app foldernode_modules folderpublic folder
Neki od fajlova koji će se menjati potencijalno:
App folder u sebi sadrži fonts folder, favicon.ico, global.css, layout.js i page.js fajl.
Više o page.js i layout.js fajlovima u sledećim stranama.
Ovaj fajl je za globalne stilove i na početku u sebi sadrži setup za Tailwind CSS, ali na početaku svakog projekta, treba obrisati sve osim prve 3 Tailwind linije da bi sve bilo šisto na početku.
Takođe očistiti i page.js i layout.js tako da nema nikakvog sadržaja osim recimo h1 koji kaže ćao ili tako nešto.