Innehåll i webbplatslayout i NextJS

Låt oss titta på webbplatsens huvudsakliga layout, som vi började gå igenom i förra lektionen:

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

Som du ser representerar webbplatslayouten en komponent med en funktion. Samtidigt skickas ett objekt in i funktionens parameter, varifrån vi extraherar nyckeln children till motsvarande variabel. I denna variabel lagras innehållet i filen page.jsx, som motsvarar den efterfrågade URL:en.

Det vill säga, i filen layout.jsx har vi webbplatsens layout lagrad, och med hjälp av variabeln children anger vi platsen i webbplatslayouten där sidans innehåll ska infogas.

Låt oss som ett exempel omsluta sidans innehåll i någon tagg:

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

Omslut innehållet på din webbplats i taggen main.