NextJS raamistiku põhitööpõhimõte

Eelmistes tundides installisime NextJS raamistiku ja tutvusime selle põhistruktuuriga. On aeg asuda põhitööle.

NextJS-i põhiosa on marsruutimine. Marsruutimine töötab nii: kui kasutaja sisestab brauseri aadressiribale mõne URL-i, siis NextJS raamistik annab brauserile välja kindla faili, mis vastab sellele URL-ile.

Marsruutimine NextJS-is on korraldatud erilisel viisil. Selle olemus seisneb selles, et igale taotletud URL-ile vastab mõni kaust src/app sees.

Samal ajal peab kausta sees olema fail nimega page.jsx. Täpselt see fail antaksegi välja brauserile. Veelgi enam, selles failis me kirjutame koodi JSX-is ja brauserisse saadetakse lehe valmis HTML-kood.

Vaatame näidet. Oletame, et tahame, et URL-il /test/ antaks välja mingi tekst.

Loome vastava kausta: src/app/test. Selle kausta sees teeme faili page.jsx järgmise sisuga:

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

Avage meie URL brauseris: /test. Ja te näete teksti, mille me kirjutasime JSX faili sisse.

Proovige teksti muuta ja salvestage fail. Pärast seda muutub tekst automaatselt ka brauseris. Nii töötab NextJS arendusrežiimis.

Tehke nii, et aadressile pöördumisel /about prinditaks brauserisse sõnum teie ees- ja perekonnanimega.