NextJS-kehyksen perustoimintaperiaate

Edellisissä oppitunneissa asensimme NextJS-kehyksen ja tutustuimme sen perusrakenteeseen. Nyt on aika ryhtyä pääasialliseen työhön.

NextJS:n keskeinen osa on reititys. Reititys toimii seuraavasti: kun käyttäjä kirjoittaa selaimen osoiteriville tietyn URL-osoitteen, NextJS-kehys palauttaa selaimelle tietyn tiedoston, joka vastaa kyseistä URL-osoitetta.

Reititys NextJS:ssä on toteutettu erityisellä tavalla. Sen ydin on siinä, että jokainen pyydetty URL-osoite vastaa tiettyä kansiota src/app-sisällä.

Samalla kansion sisällä on oltava tiedosto nimeltä page.jsx. Juuri tämä tiedosto palautetaan selaimeen. Lisäksi tässä tiedostossa kirjoitamme koodia JSX:llä, ja selaimelle lähetetään valmis HTML-sivukoodi.

Katsotaanpa esimerkkiä. Oletetaan, että haluamme, että URL-osoitteessa /test/ palautetaan tietty teksti.

Luodaan vastaava kansio: src/app/test. Tämän kansion sisälle teemme tiedoston page.jsx seuraavalla sisällöllä:

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

Avaa selaimessa URL-osoitteemme: /test. Ja näet tekstin, jonka kirjoitimme JSX-tiedoston sisälle.

Kokeile vaihtaa tekstiä ja tallentaa tiedosto. Tämän jälkeen teksti muuttuu automaattisesti myös selaimessa. Näin NextJS toimii kehitystilassa.

Tee niin, että kun osoitteeseen /about mennään, selaimessa näytetään viesti nimesi ja sukunimesi kanssa.