Indhold i webstedslayout i NextJS

Lad os overveje hovedlayoutet for webstedet, som vi begyndte at analysere i den forrige lektion:

export default function RootLayout({children}) {
	return (
		<html lang="en">
			<body>
				{children}
			</body>
		</html>
	);
}

Som du kan se, er webstedets layout en komponent med en funktion. Samtidig overføres et objekt til funktionens parameter, hvorfra vi udtrækker nøglen children i den tilsvarende variabel. Denne variabel indeholder indholdet af filen page.jsx, som svarer til den anmodede URL.

Det vil sige, at i filen layout.jsx opbevarer vi webstedets layout, og ved hjælp af variablen children angiver vi stedet i webstedets layout, hvor sidens indhold skal indsættes.

Lad os for eksempel indkapsle sidens indhold i et eller andet tag:

export default function RootLayout({children}) {
	return (
		<html lang="en">
			<body>
				<main>
					{children}
				</main>
			</body>
		</html>
	);
}

Indkapsl indholdet på dit websted i tagget main.