Advanced Layouts

Nested layouts, layout groups, parallel routes, and shared layouts.

Overview

Layouts provide persistent UI across multiple pages.

Key Concepts

Nested Layouts — Layouts that wrap specific routes
Layout Groups — Group routes with shared layout
Parallel Routes — Render multiple layouts simultaneously
Shared Layouts — Common UI across different sections
Layout Restoration — Maintain layout state during navigation

Code Examples

// app/dashboard/layout.js
export default function DashboardLayout({ children }) {
  return (
    <div className="flex">
      <Sidebar />
      <main className="flex-1">{children}</main>
    </div>
  );
}

// Nested layouts
// app/dashboard/settings/layout.js
export default function SettingsLayout({ children }) {
  return (
    <div>
      <SettingsNav />
      {children}
    </div>
  );
}

// Layout groups
// app/(marketing)/layout.js
export default function MarketingLayout({ children }) {
  return (
    <div>
      <MarketingHeader />
      {children}
      <MarketingFooter />
    </div>
  );
}

// Parallel routes
// app/layout.js
export default function RootLayout({ children, analytics, notifications }) {
  return (
    <html>
      <body>
        {children}
        {analytics}
        {notifications}
      </body>
    </html>
  );
}

Practice

Build a dashboard with nested layouts and parallel route slots.