Zee Akademija · Lekcija 09 · Frontend Razvoj — Next.js 15, Tailwind & UI Standard

Next.js 15 App Router: Server vs Client komponente

App Router donosi revoluciju: Server Components se renderiraju na poslužitelju bez slanja JavaScripta klijentu, što jamči 100/100 brzinu.

Zatražite besplatnu ponudu Sljedeća lekcija

Što ćete naučiti

Server Components (zadano): Izvršavaju se na serveru, direktno pristupaju bazi, brze su i SEO savršene.
Client Components ("use client"): Koriste se samo kada trebate interaktivnost (useState, useEffect, onClick događaji, animacije).
Pravilo ljestvice: Držite što više koda na serveru; "use client" spuštajte samo na najmanje interaktivne komponente.
Layouts i Templates: layout.tsx se ne renderira ponovno pri navigaciji, čuvajući stanje headera i navigacije.

Struktura mapa u App Routeru

U Next.js-u struktura mapa određuje URL rute na webu:

src/app/page.tsx -> Početna stranica (/).
src/app/o-nama/page.tsx -> Podstranica /o-nama.
src/app/kontakt/page.tsx -> Podstranica /kontakt.
src/app/layout.tsx -> Glavni omotač s fontovima, navigacijom i footerom.

Korak po korak

Kreiranje novog Next.js projekta
```
npx create-next-app@latest moj-projekt --typescript --tailwind --eslint --app --src-dir
```
Preporučeni službeni parametri koji postavljaju Next.js u src mapu s Tailwindom.

Savjet iz prakse

Nikada nemojte staviti "use client" na vrh cijele stranice! Ako trebate jedan gumb koji se otvara na klik, izdvojite samo taj gumb u posebnu komponentu s "use client".