Basisprincipe van het NextJS-framework

In vorige lessen hebben we het NextJS-framework geïnstalleerd en kennisgemaakt met de basisstructuur ervan. Het is tijd om aan het hoofdwerk te beginnen.

Het kernonderdeel van NextJS is routing. Routing werkt als volgt: wanneer een gebruiker een URL in de adresbalk van de browser intypt, zal het NextJS-framework een specifiek bestand aan de browser leveren dat overeenkomt met die URL.

Routing in NextJS is op een speciale manier georganiseerd. De essentie ervan is dat elke opgevraagde URL overeenkomt met een bepaalde map binnen src/app.

Tegelijkertijd moet zich binnen de map een bestand bevinden met de naam page.jsx. Precies dit bestand zal worden geleverd aan de browser. Bovendien zullen we in dit bestand code in JSX schrijven, en aan de browser zal de kant-en-klare HTML-code van de pagina worden verzonden.

Laten we naar een voorbeeld kijken. Stel dat we willen dat op URL /test/ een bepaalde tekst wordt weergegeven.

Laten we de bijbehorende map aanmaken: src/app/test. Binnen deze map maken we een bestand page.jsx met de volgende inhoud:

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

Open in de browser onze URL: /test. En u zult de tekst zien die we in het JSX-bestand hebben geschreven.

Probeer de tekst te veranderen en sla het bestand op. Daarna zal de tekst automatisch veranderen in de browser. Zo werkt NextJS in de ontwikkelmodus.

Zorg ervoor dat bij een aanvraag naar het adres /about in de browser een bericht met uw voor- en achternaam wordt weergegeven.