0
0
NextJSframework~5 mins

Multiple root layouts with route groups in NextJS

Choose your learning style9 modes available
LearnWhyDeepVisualTryChallengeProjectRecallPerf
Introduction

Multiple root layouts let you organize different parts of your app with their own main design. Route groups help keep URLs clean while grouping pages under these layouts.

You want a separate main layout for your admin pages and user pages.
You need different headers or footers for different sections of your website.
You want to group routes logically without changing the URL structure.
You want to share some layout parts only within a specific group of pages.
Syntax
NextJS
app/
  (group1)/
    layout.tsx
    page.tsx
  (group2)/
    layout.tsx
    dashboard/
      page.tsx

Route groups are folders wrapped in parentheses, like (group1).

Each group can have its own layout.tsx file that acts as a root layout for pages inside it.

Examples
This creates two root layouts: one for the root path (/) and one for dashboard pages (/dashboard), each with their own design.
NextJS
app/
  (marketing)/
    layout.tsx
    page.tsx
  (dashboard)/
    layout.tsx
    dashboard/
      page.tsx
The (admin) group has a root layout shared by all admin pages like users and settings.
NextJS
app/
  (admin)/
    layout.tsx
    users/
      page.tsx
    settings/
      page.tsx
Sample Program

This example shows two route groups: (marketing) and (dashboard). The (marketing) group handles the root path / with its layout. The (dashboard) group handles /dashboard with its own layout. Each has different colors and headers. The pages inside show different welcome messages.

NextJS
/* app/(marketing)/layout.tsx */
import React from 'react';

export default function MarketingLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        <header style={{ backgroundColor: '#a0d8f1', padding: '1rem' }}>
          <h1>Marketing Site</h1>
        </header>
        <main>{children}</main>
        <footer style={{ backgroundColor: '#a0d8f1', padding: '1rem' }}>
          <p>Ā© 2024 Marketing</p>
        </footer>
      </body>
    </html>
  );
}

/* app/(marketing)/page.tsx */
export default function MarketingPage() {
  return <p>Welcome to the Marketing homepage!</p>;
}

/* app/(dashboard)/layout.tsx */
import React from 'react';

export default function DashboardLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        <nav style={{ backgroundColor: '#f1c40f', padding: '1rem' }}>
          <h1>Dashboard</h1>
        </nav>
        <section>{children}</section>
      </body>
    </html>
  );
}

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

Route groups do not change the URL path. They only organize files and layouts.

Use route groups to keep your app structure clean and maintainable.

Each route group can have its own layout.tsx that wraps all pages inside it.

Summary

Multiple root layouts let you have different main designs for different parts of your app.

Route groups use parentheses in folder names to group routes without changing URLs.

This helps keep your app organized and lets you reuse layouts easily.