Write the header once
Every page needs the same header, navigation and footer. A layout wraps all pages in its folder (and below). When you navigate, the layout stays put — only the page inside changes.
layout.jsx receives children
export default function MenuLayout({ children }) {
return (
<section>
<h2>Our menu</h2>
<p className="note">All prices include tax.</p>
{children}
</section>
);
}- Layouts nest: root layout → menu layout → page.
- The root app/layout.jsx is required and must render <html> and <body>.
- Layouts don't re-render on navigation between their pages, so state inside them (like an open sidebar) survives.