Nested Layouts

Layouts aren't limited to the root of your app. You can place a layout.tsx file in any folder, at any depth, and Next.js will automatically nest it inside every layout above it in the tree. Each layout wraps its own children — which may be the matching page, or another, deeper layout.

How Nesting Composes

Picture a route like app/dashboard/settings/page.tsx. If both app/layout.tsx and app/dashboard/layout.tsx exist, the final render tree wraps outward-in: the root layout wraps the dashboard layout, which wraps the settings page.

TSX

app/
  layout.tsx              -> RootLayout
  dashboard/
    layout.tsx             -> DashboardLayout
    settings/
      page.tsx              -> SettingsPage

// Renders as:
<RootLayout>
  <DashboardLayout>
    <SettingsPage />
  </DashboardLayout>
</RootLayout>

A Worked Example

TSX

// app/layout.tsx
export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        <header>My Site</header>
        {children}
      </body>
    </html>
  )
}

// app/dashboard/layout.tsx
export default function DashboardLayout({ children }: { children: React.ReactNode }) {
  return (
    <div className="dashboard-grid">
      <nav>Dashboard Nav</nav>
      <section>{children}</section>
    </div>
  )
}

// app/dashboard/settings/page.tsx
export default function SettingsPage() {
  return <h2>Settings</h2>
}

Visiting /dashboard/settings renders the site header, then the dashboard nav wrapping a section, then finally the Settings heading — three layers composed automatically from three separate files, none of which import each other directly.

Adding Another Level

You can keep nesting as deep as your route structure needs. A team folder under dashboard could add its own layout for a team-switcher UI, which would then wrap every page beneath it, while still being wrapped by DashboardLayout and RootLayout above it.

File	Wraps
app/layout.tsx	Every route in the entire app
app/dashboard/layout.tsx	Every route under /dashboard
app/dashboard/team/[id]/layout.tsx	Every route under /dashboard/team/[id]

Note

This nested-by-default composition — where the folder structure itself determines how many layouts wrap a given page — is a core App Router idea. There is no separate registration step and no single top-level file trying to describe the whole app's shell at once.

How This Differs From the Pages Router

In the older Pages Router, shared UI generally lived in a single top-level _app.tsx that wrapped every page in the entire application. Getting a layout that applied to only one section of the site required manual composition inside each page, or a hand-rolled pattern using getLayout on the page component.

Pages Router: one _app.tsx, layouts applied per-page via manual patterns.
App Router: any folder can define its own layout.tsx, automatically nested by depth.
App Router layouts avoid re-rendering on sibling navigation; _app.tsx re-ran more freely.

Tip

A good rule of thumb: put shared UI as close as possible to the routes that actually need it. A layout at app/dashboard/layout.tsx is easier to reason about than piling every section's chrome into the root layout.

Nested layouts let large applications build up a shell incrementally — global chrome at the root, section chrome one level in, and feature-specific UI closer to the leaves — without any single file becoming an unmanageable catch-all.