Website-Bestandteile im Hauptlayout in NextJS
Schauen wir uns unser Website-Layout an. Derzeit ist darin der Befehl zum Einfügen des sich ändernden Seiteninhalts angegeben:
export default function RootLayout({children}) {
return (
<html lang="en">
<body>
<main>
{children}
</main>
</body>
</html>
);
}
Auf einer Website gibt es jedoch in der Regel noch andere Teile, die unverändert bleiben für verschiedene Seiten. Das können beispielsweise Header und Footer sein. Fügen wir sie unserem Layout hinzu:
export default function RootLayout({children}) {
return (
<html lang="en">
<body>
<header>
header
</header>
<main>
{children}
</main>
<footer>
footer
</footer>
</body>
</html>
);
}
Fügen Sie dem Layout Ihres Projekts Blöcke für Header, Footer, sowie für die rechte und linke Seitenleiste hinzu.