How to create nested layout in next.js

NextjsHow-ToBeginner · 4 min read

How to Create Nested Layouts in Next.js Easily

In Next.js, create nested layouts by adding layout.js files inside nested folders within the app directory. Each layout.js wraps its child pages or layouts, allowing you to build reusable nested page structures.

📐

Syntax

In Next.js App Router, nested layouts are created by placing layout.js files inside nested folders under the app directory. Each layout.js exports a React component that wraps its children with shared UI like headers or sidebars.

The basic structure is:

app/layout.js: Root layout wrapping the whole app.
app/section/layout.js: Nested layout wrapping pages inside the section folder.
app/section/page.js: Page inside the nested layout.

The layout component receives {children} which renders the nested content.

javascript

export default function Layout({ children }) {
  return (
    <html lang="en">
      <body>
        <header>Header content</header>
        <main>{children}</main>
        <footer>Footer content</footer>
      </body>
    </html>
  )
}

💻

Example

This example shows a root layout wrapping the entire app and a nested layout inside a dashboard folder. The nested layout adds a sidebar only for dashboard pages.

javascript

/* app/layout.js */
export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <header>
          <h1>My Website</h1>
        </header>
        {children}
        <footer>© 2024 My Website</footer>
      </body>
    </html>
  )
}

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

/* app/dashboard/page.js */
export default function DashboardPage() {
  return <h2>Welcome to your dashboard</h2>
}

/* app/page.js */
export default function HomePage() {
  return <p>This is the homepage outside dashboard</p>
}

Output

<html lang="en"><body><header><h1>My Website</h1></header><p>This is the homepage outside dashboard</p><footer>© 2024 My Website</footer></body></html> <html lang="en"><body><header><h1>My Website</h1></header><div style="display:flex;"><nav style="width:200px;background:#eee;"><ul><li>Dashboard Home</li><li>Settings</li></ul></nav><main style="padding:1rem;"><h2>Welcome to your dashboard</h2></main></div><footer>© 2024 My Website</footer></body></html>

⚠️

Common Pitfalls

Not placing layout.js files in the correct nested folders will prevent layouts from applying properly.
Forgetting to include {children} in the layout component will cause nested pages not to render.
Using pages directory instead of app directory will not support nested layouts this way.
Mixing old _app.js layouts with new app/layout.js can cause confusion; prefer the new App Router layouts.

javascript

/* Wrong: Missing children in layout */
export default function Layout() {
  return <div>Header only</div>
}

/* Right: Include children to render nested content */
export default function Layout({ children }) {
  return <div><header>Header</header>{children}</div>
}

📊

Quick Reference

Root layout: app/layout.js wraps entire app.
Nested layout: app/folder/layout.js wraps pages inside that folder.
Children prop: Always render {children} inside layouts.
Use App Router: Nested layouts require Next.js 13+ with app directory.

✅

Key Takeaways

Place layout.js files inside nested folders in the app directory to create nested layouts.

Always include {children} in your layout components to render nested content.

Use the Next.js App Router (app directory) to enable nested layouts.

Nested layouts help reuse UI parts like headers, footers, and sidebars per section.

Avoid mixing old pages directory layouts with new app directory layouts.