NextJS-rammeverkets grundlæggende funktionsprincip

I de foregående lektioner installerede vi NextJS-rammeverket og stiftede bekendtskab med dens grundlæggende struktur. Det er tid til at komme i gang med hovedarbejdet.

Hoveddelen af NextJS er routing. Routing fungerer på følgende måde: når en bruger indtaster en URL i browserens adresselinje, vil NextJS-rammeverket levere en bestemt fil til browseren, der svarer til denne URL.

Routing i NextJS er organiseret på en særlig måde. Essensen er, at hver anmodet URL svarer til en mappe inde i src/app.

Desuden skal der inde i mappen være en fil med navnet page.jsx. Det er netop denne fil, der vil blive leveret til browseren. Og i denne fil vil vi skrive kode i JSX, og til browseren vil der blive sendt færdig HTML-kode for siden.

Lad os se på et eksempel. Antag, at vi ønsker, at URL'en /test/ skal returnere en vis tekst.

Lad os oprette den tilsvarende mappe: src/app/test. Inde i denne mappe laver vi filen page.jsx med følgende indhold:

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

Åbn vores URL i browseren: /test. Og du vil se teksten, som vi skrev inde i JSX-filen.

Prøv at ændre teksten og gem filen. Herefter vil teksten automatisk blive ændret også i browseren. Sådan fungerer NextJS i udviklingstilstand.

Sørg for, at når der henvises til adressen /about, vises der en besked med dit for- og efternavn i browseren.