Next.js Basics›Core· 35 min read

Pages and Shared Layouts

A layout wraps your pages with shared parts — like a header and footer — so you do not repeat them.

What you will learn

Explain what a layout does
Use the children prop in a layout
Share a header across every page

The problem layouts solve

Most sites show the same header and footer on every page. Copying them into every page.js would be tedious and easy to get wrong. A layout lets you write them once.

The root layout

The file app/layout.js is the root layout. It wraps every page in your app. Whatever page the user visits is handed to the layout through a special children prop, and you decide where children goes.

The root layout wraps every page; {children} is the current page

// app/layout.js
export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <header><h1>CodingClave</h1></header>
        <main>{children}</main>
        <footer>(c) 2026 CodingClave</footer>
      </body>
    </html>
  );
}

Note: Output (visiting /about): CodingClave <- from the layout header About CodingClave <- this is {children}, the /about page (c) 2026 CodingClave <- from the layout footer The header and footer come from the layout. Only the middle part changes as you move between pages.

Layouts can nest

You can add a layout inside a folder too. For example, app/blog/layout.js wraps only the blog pages — perfect for a blog sidebar — while still sitting inside the root layout.

The root layout (app/layout.js) wraps the whole app and must include html and body.
A nested layout (e.g. app/blog/layout.js) wraps only that section.
Layouts stay mounted when you move between pages inside them, so things like a sidebar do not reload.

Tip: Think of layouts like nested picture frames: the root frame holds the whole app, and a section frame (blog) sits inside it, holding just that section. The page is the photo that changes.

Watch out: There must be exactly one root layout, and it is the only place the html and body tags should live. Do not add html or body to a normal page.

Q. What does the children prop hold inside a layout?

Answer: A layout wraps pages, and {children} is the spot where the current page is rendered inside that shared shell.

✍️ Practice

Add a header and footer to the root layout and confirm they appear on every page.
Create a nested layout for /blog that adds a sidebar to only the blog pages.

🏠 Homework

Build a root layout with a navigation bar that links to Home, About and Contact.