0
0
NextJSframework~5 mins

Nested layouts in NextJS

Choose your learning style9 modes available
LearnWhyDeepVisualTryChallengeProjectRecallPerf
Introduction

Nested layouts help organize pages by sharing common parts like headers or sidebars. They make your app easier to build and keep consistent.

You want a main layout with a header and footer shared by many pages.
You have a dashboard section with its own sidebar inside the main layout.
You want to reuse a layout for blog posts that share a style different from the homepage.
You want to keep your code clean by separating page parts into smaller layouts.
Syntax
NextJS
export default function Layout({ children }) {
  return (
    <html>
      <body>
        <header>Header content</header>
        {children}
        <footer>Footer content</footer>
      </body>
    </html>
  )
}

The children prop is where nested pages or layouts appear.

Each layout wraps its nested content, creating a tree of layouts.

Examples
This is the root layout wrapping the whole app.
NextJS
app/layout.js

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <header>Main header</header>
        {children}
        <footer>Main footer</footer>
      </body>
    </html>
  )
}
This layout wraps all dashboard pages inside the root layout.
NextJS
app/dashboard/layout.js

export default function DashboardLayout({ children }) {
  return (
    <div>
      <nav>Dashboard sidebar</nav>
      <main>{children}</main>
    </div>
  )
}
This page is shown inside the dashboard layout, which is inside the root layout.
NextJS
app/dashboard/page.js

export default function DashboardPage() {
  return <p>Dashboard home content</p>
}
Sample Program

This example shows a root layout with header and footer. Inside it, the dashboard layout adds a sidebar and main area. The dashboard page content appears inside the dashboard layout.

NextJS
// app/layout.js
export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <header style={{ padding: '1rem', backgroundColor: '#eee' }}>
          <h1>My Site</h1>
        </header>
        {children}
        <footer style={{ padding: '1rem', backgroundColor: '#eee' }}>
          <p>Ā© 2024 My Site</p>
        </footer>
      </body>
    </html>
  )
}

// app/dashboard/layout.js
export default function DashboardLayout({ children }) {
  return (
    <div style={{ display: 'flex' }}>
      <nav style={{ width: '200px', backgroundColor: '#ddd', padding: '1rem' }}>
        <ul>
          <li>Dashboard Home</li>
          <li>Settings</li>
        </ul>
      </nav>
      <main style={{ flex: 1, padding: '1rem' }}>{children}</main>
    </div>
  )
}

// app/dashboard/page.js
export default function DashboardPage() {
  return <p>Welcome to your dashboard!</p>
}
OutputSuccess
Important Notes

Layouts in Next.js 13+ live in the app folder and wrap nested folders/pages automatically.

Use semantic HTML and ARIA roles inside layouts for better accessibility.

Test layouts by viewing nested pages in the browser and using DevTools to inspect structure.

Summary

Nested layouts let you share page parts like headers and sidebars easily.

They keep your app organized and consistent.

Next.js automatically combines layouts from parent folders down to pages.