The Root Layout

Part of the Next.js Essentials section of Coddy's React journey — lesson 11 of 47.

Every app has parts that never change: the page shell, a header, a footer. In Next.js those live in a layout, and the outermost one is called the root layout.

It's the file you've had locked in front of you all along:

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

Three things make it different from a page:

It is required, and it's the only file that renders <html> and <body>
It receives children, whatever page the URL matched. Forget to render {children} and your app shows nothing but the shell.
It wraps every route in the app, without any page importing it

It persists

Here's the part that surprises people. When the user moves from / to /menu, the layout is not re-created. Next.js swaps out the page inside it and leaves the layout alone.

So a shared header doesn't flicker, a video in the sidebar keeps playing, and any state living in the layout survives the navigation: an open menu stays open, a scroll position stays put. A layout is a long-lived frame; pages come and go inside it.

One consequence worth remembering: because a layout doesn't re-run on navigation, it can't read the current page's searchParams. It isn't listening for the change.

Try it yourself

This lesson doesn't include a code challenge.