Nested Routes

Nested Routes

Nested routes let you create complex page layouts where certain UI elements remain constant while others change. Think of it like a website with a sidebar that stays the same while the main content updates.

In Next.js, nested routes are achieved through nested layouts. The outer layout wraps all child routes, providing a consistent structure.

Creating Nested Layouts

To create a nested layout, you add a layout.js file to a directory. This layout will wrap all pages in that directory and its subdirectories.

app/
├── layout.js        # Root layout (wraps everything)
├── page.js          # Home page
├── dashboard/
│   ├── layout.js    # Dashboard layout (wraps dashboard pages)
│   ├── page.js      # Dashboard home
│   └── settings/
│       └── page.js  # Dashboard settings

The dashboard layout will wrap both the dashboard home page and the settings page. Any UI elements in the dashboard layout will appear on both pages.

Implementing a Dashboard Layout

Let's create a practical example. Suppose you're building a dashboard with a sidebar navigation.

// app/dashboard/layout.js
export default function DashboardLayout({ children }) {
  return (
    <div className="dashboard">
      <aside className="sidebar">
        <nav>
          <ul>
            <li><a href="/dashboard">Overview</a></li>
            <li><a href="/dashboard/analytics">Analytics</a></li>
            <li><a href="/dashboard/settings">Settings</a></li>
          </ul>
        </nav>
      </aside>
      <main className="content">
        {children}
      </main>
    </div>
  );
}

This layout provides the sidebar navigation. The children prop receives the actual page content, which changes based on the current route.

Layout Nesting

Layouts can be nested multiple levels deep. Each layout wraps its children, creating a layered structure.

// app/dashboard/settings/layout.js
export default function SettingsLayout({ children }) {
  return (
    <div className="settings">
      <div className="settings-nav">
        <a href="/dashboard/settings/profile">Profile</a>
        <a href="/dashboard/settings/security">Security</a>
      </div>
      <div className="settings-content">
        {children}
      </div>
    </div>
  );
}

Now the settings pages have their own sub-navigation within the dashboard layout. This creates a clean, organized user experience.

Shared Layouts vs Root Layouts

It's important to understand the difference between root layouts and shared layouts:

The root layout (app/layout.js) is required and wraps your entire application. It's where you put global elements like the HTML structure, head metadata, and global providers.

Shared layouts are optional and only apply to specific route segments. They're perfect for section-specific navigation or UI elements.

Both types of layouts persist across navigations, meaning the layout doesn't re-render when you move between pages. This improves performance and maintains state.