Onderdelen van de website in de hoofdlayout in NextJS
Laten we eens kijken naar onze website layout. Momenteel staat er een commando voor het invoegen van veranderende pagina-inhoud:
export default function RootLayout({children}) {
return (
<html lang="en">
<body>
<main>
{children}
</main>
</body>
</html>
);
}
Echter, een website heeft meestal ook andere onderdelen die onveranderlijk blijven voor verschillende pagina's. Bijvoorbeeld, dit kunnen een header en footer zijn. Laten we deze toevoegen aan onze layout:
export default function RootLayout({children}) {
return (
<html lang="en">
<body>
<header>
header
</header>
<main>
{children}
</main>
<footer>
footer
</footer>
</body>
</html>
);
}
Voeg in de layout van je project blokken toe voor een header, footer, en ook voor rechter en linker sidebars.
