Site Sections in the Main Layout in NextJS
Let's look at our site layout. Currently, it contains the command to insert the changing page content:
export default function RootLayout({children}) {
return (
<html lang="en">
<body>
<main>
{children}
</main>
</body>
</html>
);
}
However, a website usually has other parts that remain unchanged for different pages. For example, these could be the header and footer. Let's add them to our layout:
export default function RootLayout({children}) {
return (
<html lang="en">
<body>
<header>
header
</header>
<main>
{children}
</main>
<footer>
footer
</footer>
</body>
</html>
);
}
Add a block with a header, footer, as well as right and left sidebars to your project's layout.
