Layouts in Next.js: Root Layouts and Nested Layouts Explained
A layout file wraps a route segment in shared UI. Learn the difference between the required root layout and nested layouts, and where each one goes.
Next.js layouts are files named layout.tsx that wrap a route segment in UI shared by every page inside it, such as a header, sidebar, or footer. Next.js renders a layout once and keeps rendering the matching page inside it as the reader moves between routes in that segment.
Every App Router project needs exactly one root layout at the top of the app folder. You can add as many nested layouts below it as you want, one per folder that needs its own shared UI.
App.tsx// app/layout.tsx
export default function RootLayout({
children,
}: Readonly<{ children: React.ReactNode }>) {
return (
<html lang="en">
<body>{children}</body>
</html>
);
}This is the root layout, and it is required. Next.js will not build the app without one directly inside the app folder. Visit any route in the project and the browser loads this exact page shell, with the matching page rendered where children sits.
Where a nested layout goes
A nested layout lives inside a subfolder of app and only wraps the routes in that folder. Placing the file anywhere else means it never runs for the pages you meant to wrap.
textapp/
layout.tsx (root layout, wraps everything)
page.tsx (served at /)
blog/
layout.tsx (nested layout, wraps only /blog routes)
page.tsx (served at /blog)
hello-world/
page.tsx (served at /blog/hello-world)The layout inside the blog folder wraps the blog index page and every route below it, including the dynamic post page. Routes outside that folder, such as the site home page, never see this layout. Placement is what decides which pages a layout affects, not the layout's file name.
App.tsx// app/blog/layout.tsx
export default function BlogLayout({
children,
}: Readonly<{ children: React.ReactNode }>) {
return (
<section>
<nav>Blog navigation</nav>
{children}
</section>
);
}A nested layout never renders the page's own html or body tags. Those belong to the root layout alone, so this component returns a plain section that sits inside the root layout's page shell.
What a layout can and cannot do
Every layout receives a children prop, which is the matching page or the next nested layout down the tree. A layout that sits under a dynamic segment also receives route params, the same way a page does, and the value must be awaited before you read anything from it.
| Convention | Result |
|---|---|
| Root layout in the app folder | Required, owns the page shell, wraps the whole app |
| Nested layout in a subfolder | Wraps only the routes inside that folder |
| No layout file in a folder | The nearest parent layout applies instead |
Layouts preserve state and stay mounted while a reader moves between pages in the same segment. That is why they do not re-render on every navigation, and it is the main reason a layout is the right place for a sidebar or nav bar instead of repeating that UI in every page.
Projects that turn on Cache Components extend this idea further with React's Activity feature, which keeps a page's own state and scroll position around automatically when a reader leaves and comes back. Route segment config exports such as a dynamic rendering flag belong to the older model used before Cache Components, so check which model a project uses before relying on one inside a layout.
The most common mistake is putting head tags like a title directly inside a layout component. Use the Metadata API instead, covered in generateMetadata Explained with Real Examples.
To reuse a layout's UI across pages that each fetch their own data, see How to Share UI Across Pages with Nested Layouts. If a segment needs to reset its UI on every visit instead of preserving it like a layout does, that is a job for a template file, not a layout.
Rune AI
Key Insights
- The app folder needs one required root layout that owns the page shell.
- A nested layout wraps only the routes inside its own folder.
- Layouts receive a children prop and can also receive route params.
- Layouts preserve state and do not re-render on navigation inside the same segment.
- Route segment config exports belong to the model used before Cache Components.
Powered by Rune AIFrequently Asked Questions
Does every folder need its own layout file?
Can a nested layout define its own html and body tags?
Do layouts re-render when I navigate between pages inside them?
Conclusion
A Next.js layout wraps every route inside its folder in shared UI without adding a path segment. The root layout is required and owns the page shell, while a nested layout adds UI for one part of the app and stays mounted while a reader moves between pages inside it.
More in this topic
`generateMetadata` Explained with Real Examples
What generateMetadata does, when it runs, and how to use it for real routes: awaited params, deduplicated data fetching, extending parent metadata, and returning a 404 from metadata.
Canonical URLs in Next.js: `metadataBase`, `alternates.canonical`, and Dynamic Pages
How canonical URLs work in the Next.js App Router: setting metadataBase once, writing alternates.canonical per route, handling dynamic segments, and what happens when the base URL is missing.
Open Graph and Twitter Card Metadata in Next.js
How to write Open Graph and Twitter card metadata in the Next.js App Router: the openGraph and twitter fields, automatic card defaults, article tags, and image merge rules.