Multiple root layouts

This guide demonstrates how to implement multiple root layouts in Next.js using route groups.

Route groups

Route groups allow you to group routes together without affecting the URL structure. But they also allow you to apply different layouts to different sections of your application.

Creating multiple layouts

To implement multiple root layouts:

Create route groups in your app directory using parentheses:

Directoryapp/
- Directory(marketing)/
  - layout.tsx Layout for marketing pages
  - Directorypricing/
    page.tsx Pricing page
  - Directoryresources/
    page.tsx Resources page
- Directory(auth)/
  - layout.tsx Layout for authentication pages
  - Directorylogin/
    page.tsx Login page
  - Directoryregister/
    page.tsx Register page

Define separate layouts for each section. For example, the marketing layout can include a header and footer, while the authentication layout can be minimal.

// app/(marketing)/layout.tsx
export default function MarketingLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <div>
      <header>
        <nav>{/* Marketing navigation */}</nav>
      </header>
      {children}
      <footer>{/* Marketing footer */}</footer>
    </div>
  );
}

// app/(auth)/layout.tsx
export default function AuthLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <div className="auth-container">
      <main>{children}</main>
    </div>
  );
}

How it works

Route groups (folders wrapped in parentheses) don’t affect the URL structure
Each group can have its own layout.tsx file
The layout applies to all pages within that group
URLs remain clean: for example, /login instead of /(auth)/login
Pages inherit the closest layout in their route hierarchy

Layouts in route groups provide the flexibility to create varied user interfaces while maintaining organized and maintainable code structure.

Common use cases

Multiple root layouts are particularly useful for:

Marketing vs. application interfaces
Public vs. authenticated sections
Different sections requiring distinct navigation patterns

Good to know

Remove the root layout.tsx from the app directory when using multiple root layouts
Each route must belong to a group with a layout
Route groups can be nested for additional organization
You can share components between layouts while maintaining distinct structures