Hoofbeginsel van die NextJS-raamwerk

In vorige lesse het ons die NextJS-raamwerk geïnstalleer en kennis gemaak met sy basiese struktuur. Dit is tyd om met die hoofwerk te begin.

Die hoofdeel van NextJS is roetering. Roetering werk so: wanneer 'n gebruiker 'n sekere URL in die blaaier se adresbalk intik, sal die NextJS-raamwerk 'n sekere lêer aan die blaaier lewer wat ooreenstem met daardie URL.

Roetering in NextJS is op 'n spesiale manier ingerig. Die kern daarvan is dat elke aangevraagde URL ooreenstem met 'n sekere gids binne src/app.

Terselfdertyd moet daar binne die gids 'n lêer met die naam page.jsx wees. Presies hierdie lêer sal aan die blaaier gelewer word. Boonop sal ons in hierdie lêer kode in JSX skryf, en aan die blaaier sal die gereed HTML-kode van die bladsy gestuur word.

Kom ons kyk na 'n voorbeeld. Gestel ons wil hê dat by die URL /test/ 'n sekere teks gelewer word.

Kom ons skep die ooreenstemmende gids: src/app/test. Binne hierdie gids maak ons 'n lêer page.jsx met die volgende inhoud:

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

Maak in die blaaier ons URL oop: /test. En jy sal die teks sien wat ons binne die JSX-lêer geskryf het.

Probeer om die teks te verander en stoor die lêer. Daarna sal die teks outomaties in die blaaier verander. So werk NextJS in die ontwikkelingsmodus.

Maak so dat wanneer daar na die adres /about verwys word, 'n boodskap met jou naam en van in die blaaier vertoon word.