Osnovni princip rada frejmvorka NextJS

U prethodnim lekcijama smo instalirali frejmvork NextJS i upoznali smo se sa njegovom osnovnom strukturom. Vreme je da se pozabavimo osnovnim poslom.

Osnovni deo NextJS-a je rutiranje. Rutiranje funkcioniše ovako: kada korisnik unese u adresnu traku pregledača neki URL, frejmvork NextJS će dostaviti pregledaču određeni fajl, koji odgovara tom URL-u.

Rutiranje u NextJS-u je organizovano na poseban način. Njegova suština je u tome da svakom zahtevanom URL-u odgovara neki folder unutar src/app.

Pritom unutar foldera mora da postoji fajl sa nazivom page.jsx. Upravo taj fajl će biti dostavljen pregledaču. Štaviše, u ovom fajlu mi ćemo pisati kod u JSX-u, a u pregledač će biti poslat gotovi HTML kod stranice.

Hajde da pogledamo na primeru. Pretpostavimo da želimo da se na URL /test/ dostavi neki tekst.

Kreirajmo odgovarajući folder: src/app/test. Unutar ovog foldera napravimo fajl page.jsx sa sledećim sadržajem:

export default function Test() {
	return <h1>hello, user!</h1>;
}

Otvorite u pregledaču naš URL: /test. I videćete tekst koji smo napisali unutar JSX fajla.

Pokušajte da promenite tekst i sačuvajte fajl. Nakon toga tekst će se automatski promeniti i u pregledaču. Tako funkcioniše NextJS u režimu razvoja.

Uredite tako da prilikom pristupa adresi /about u pregledaču bude prikazana poruka sa vašim imenom i prezimenom.