Multiple root layouts with route groups in NextJS - Deep Dive

Overview - Multiple root layouts with route groups

What is it?

Multiple root layouts with route groups is a way in Next.js to organize your app by having different main layouts for different sections of your website. Instead of one single layout wrapping all pages, you can create separate layouts for groups of routes. This helps keep your code clean and your UI consistent within each group. It uses folders called route groups that don't affect the URL but help structure the app.

Why it matters

Without multiple root layouts and route groups, all pages share one main layout or you must repeat layout code, making your app harder to maintain and less flexible. This feature lets you build big apps with different designs or navigation for parts like admin, user, or marketing sections. It improves developer experience and user experience by keeping each section focused and consistent.

Where it fits

Before learning this, you should understand basic Next.js routing and layouts. After this, you can explore advanced layout nesting, server components, and dynamic routing. This concept fits in the middle of mastering Next.js app structure and scalable UI design.

Mental Model

Core Idea

Multiple root layouts with route groups let you create separate main layouts for different parts of your app without changing URLs, organizing your UI by logical sections.

Think of it like...

It's like having different front doors for different wings of a big house, where each wing has its own style and furniture, but all doors lead inside without changing the house address.

App Root
├── (marketing)/layout.js  <-- Marketing root layout
│   ├── page.js
│   └── about.js
├── (admin)/layout.js      <-- Admin root layout
│   ├── dashboard.js
│   └── settings.js
└── layout.js              <-- Default root layout
    └── home.js

Build-Up - 7 Steps

1

Foundation

Understanding Next.js layouts basics

Concept: Learn what layouts are and how Next.js uses them to wrap pages.

In Next.js, a layout is a special file named layout.js inside the app folder or a route folder. It wraps pages inside that folder, so you can add common UI like headers or footers once. For example, a layout.js in the root app folder wraps all pages.

Result

All pages inside the app folder share the same layout UI elements.

Understanding layouts is key because they let you avoid repeating UI code on every page.

2

Foundation

What are route groups in Next.js?

Concept: Route groups are folders with parentheses that group routes without changing URLs.

In Next.js, you can create folders like (admin) or (marketing) to group routes. These folders don't add to the URL path but help organize files. For example, app/(admin)/dashboard.js is accessed at /dashboard, not /admin/dashboard.

Result

You can organize routes logically without affecting the URL structure.

Route groups separate code structure from URL paths, making organization flexible.

3

Intermediate

Creating multiple root layouts with route groups

🤔Before reading on: do you think route groups can have their own layouts that replace the root layout, or do they only add on top of it? Commit to your answer.

Concept: Route groups can have their own root layouts that replace the default root layout for their routes.

By placing a layout.js inside a route group folder like (admin)/layout.js, you create a separate root layout for all routes inside that group. This layout replaces the default root layout for those routes, letting you have different headers, footers, or styles per group.

Result

Routes inside (admin) use the admin layout, while others use the default layout.

Knowing that route group layouts replace the root layout helps you design distinct app sections cleanly.

4

Intermediate

How route groups affect URL and navigation

🤔Before reading on: do you think route groups change the URL path users see, or only the file structure? Commit to your answer.

Concept: Route groups do not change the URL path; they only organize files and layouts.

Even if you put pages inside (marketing)/page.js, the URL remains /page, not /marketing/page. This means you can have different layouts or logic for groups without confusing URLs. Navigation links use normal paths without parentheses.

Result

Users see clean URLs while developers get organized code and layouts.

Understanding this prevents confusion about URLs and helps keep user experience consistent.

5

Advanced

Nesting layouts inside route groups

🤔Before reading on: do you think you can nest layouts inside route groups to create multi-level UI structures, or is only one layout allowed per group? Commit to your answer.

Concept: You can nest layouts inside route groups to build complex UI hierarchies.

Inside a route group, you can have multiple nested folders each with their own layout.js. For example, (admin)/layout.js wraps all admin pages, and (admin)/settings/layout.js wraps only settings pages. This lets you share UI parts and customize others.

Result

Your app can have layered layouts, each adding or overriding UI parts.

Knowing nested layouts lets you build scalable and maintainable UI structures.

6

Advanced

Combining multiple route groups in one app

Concept: You can have several route groups side by side, each with its own root layout.

For example, your app folder can have (marketing)/layout.js, (admin)/layout.js, and a default layout.js. Each group handles its routes with its layout. This is useful for apps with distinct sections like public site, admin panel, and user dashboard.

Result

Your app serves different layouts depending on the route group, improving clarity and UX.

Combining route groups allows clear separation of concerns and UI consistency per section.

7

Expert

How Next.js resolves multiple root layouts internally

🤔Before reading on: do you think Next.js merges all layouts from route groups and root, or picks one layout per route? Commit to your answer.

Concept: Next.js picks the closest layout in the route group hierarchy as the root layout for that route, ignoring the default root layout for that group.

When rendering a page, Next.js looks for the nearest layout.js starting from the route group folder. If found, it uses that as the root layout. It does not merge layouts from different groups or the root app folder. This means route group layouts fully replace the root layout for their routes.

Result

Routes inside a route group use only that group's root layout, not the app root layout.

Understanding this prevents layout conflicts and helps design predictable UI hierarchies.

Under the Hood

Next.js uses the file system to map routes and layouts. When a request comes in, it matches the URL to a page file. Then it searches upward in the folder tree for the nearest layout.js to wrap the page. Route groups with parentheses are ignored in URL matching but considered in layout resolution. This lets Next.js pick different root layouts per route group by finding layout.js inside those folders first.

Why designed this way?

This design separates URL structure from code organization, allowing developers to group routes logically without affecting URLs. It also enables multiple root layouts for different app sections, solving the problem of one-size-fits-all layouts. Alternatives like nested routes changing URLs were rejected to keep URLs clean and predictable.

Request URL
   ↓
Find page file
   ↓
Search folders upward for layout.js
   ├─ If in route group folder (e.g., (admin))
   │    └─ Use that layout.js as root layout
   └─ Else
        └─ Use app root layout.js
   ↓
Render page wrapped by chosen layout

Myth Busters - 4 Common Misconceptions

Quick: Do route groups change the URL path users see? Commit yes or no.

Common Belief: Route groups add a prefix to the URL path, like folders in the URL.

Reality: Route groups do NOT change the URL path; they only organize files and layouts internally.

Why it matters: Believing this causes confusion in routing and broken links if you try to use route group names in URLs.

Quick: Can multiple root layouts from different route groups combine on one page? Commit yes or no.

Common Belief: Next.js merges multiple root layouts from different route groups to build the final UI.

Reality: Next.js picks only one root layout per route, the closest in the route group hierarchy, ignoring others.

Why it matters: Expecting merged layouts leads to unexpected UI bugs and layout conflicts.

Quick: Does placing a layout.js in a route group folder add to the URL path? Commit yes or no.

Common Belief: Adding layout.js inside a route group folder changes the URL path to include the group name.

Reality: Layout files do not affect URLs; route groups are invisible in URLs regardless of layout presence.

Why it matters: Misunderstanding this causes developers to misconfigure navigation and URL expectations.

Quick: Can you use route groups to create nested URLs automatically? Commit yes or no.

Common Belief: Route groups automatically create nested URLs matching their folder structure.

Reality: Route groups do not affect URLs; nested URLs require nested folders without parentheses.

Why it matters: Confusing route groups with nested routes leads to broken navigation and routing errors.

Expert Zone

1

Route group layouts fully replace the root layout for their routes, so shared UI must be duplicated or lifted to a common ancestor outside groups.

2

Using route groups can complicate dynamic routing if not carefully planned, especially with overlapping route names across groups.

3

Route groups are invisible to URL but visible to middleware and server components, affecting data fetching and caching strategies.

When NOT to use

Avoid multiple root layouts with route groups if your app has a simple structure or if you want URL paths to reflect folder structure. Instead, use nested folders without parentheses for nested URLs and a single root layout for simplicity.

Production Patterns

In large apps, route groups separate public marketing pages, authenticated user dashboards, and admin panels, each with distinct root layouts. Teams use this to delegate UI ownership and reduce merge conflicts. Route groups also help implement feature flags by isolating experimental sections.

Connections

Modular programming

Both organize code into independent, reusable parts.

Understanding route groups as modular units helps grasp how to build scalable, maintainable apps by separating concerns.

Filesystem abstraction

Route groups abstract folder structure from URL paths, similar to virtual filesystems hiding complexity.

Knowing this helps understand how Next.js decouples physical file layout from user-facing URLs.

Urban zoning in city planning

Route groups act like zoning districts that separate city areas by function without changing street addresses.

This cross-domain view clarifies why separating code areas without changing URLs improves organization and user experience.

Common Pitfalls

#1 Expecting route groups to change URLs and adding navigation links with group names.

Wrong approach:

Link href="/admin/dashboard" when dashboard is inside (admin) route group but URL is actually "/dashboard".

Correct approach:

Link href="/dashboard" matching the actual URL ignoring route group folder.

Root cause:

Misunderstanding that route groups affect URLs leads to broken navigation links.

#2 Placing shared UI only in the app root layout when route groups have their own layouts.

Wrong approach:

app/layout.js has header, but (admin)/layout.js does not, causing missing header in admin routes.

Correct approach:

Duplicate or lift shared UI to a common ancestor layout outside route groups or add header in each route group layout.

Root cause:

Not realizing route group layouts replace root layout causes missing shared UI.

#3 Trying to nest route groups to create nested URLs automatically.

Wrong approach:

Using (admin)/(settings)/page.js expecting URL /admin/settings but URL is /settings.

Correct approach:

Use nested folders without parentheses like admin/settings/page.js to create nested URLs.

Root cause:

Confusing route groups with nested routes causes URL structure errors.

Key Takeaways

Multiple root layouts with route groups let you organize your Next.js app into distinct UI sections without changing URLs.

Route groups are folders with parentheses that group routes logically but remain invisible in URLs.

Each route group can have its own root layout that fully replaces the default root layout for routes inside it.

Understanding that route groups do not affect URLs prevents navigation and routing mistakes.

Using multiple root layouts improves app scalability and clarity but requires careful planning of shared UI.

Practice

1. What is the main purpose of using multiple root layouts in a Next.js app?

easy

A. To load all pages with the same layout

B. To change the URL structure automatically

C. To have different main designs for different parts of the app

D. To disable routing in some parts of the app

Solution

1. Step 1: Understand root layouts

   Root layouts define the main design or structure for pages in a Next.js app.

2. Step 2: Purpose of multiple root layouts

   Using multiple root layouts allows different parts of the app to have their own main design, improving organization and user experience.

3. Final Answer:

   To have different main designs for different parts of the app -> Option C

4. Quick Check:

   Multiple root layouts = different main designs [OK]

Hint: Multiple root layouts mean different main designs [OK]

Common Mistakes:

• Thinking multiple root layouts change URLs
• Assuming all pages share one layout
• Believing layouts disable routing

2. Which folder name correctly creates a route group without changing the URL in Next.js?

easy

A. dashboard/(admin)/settings

B. dashboard/admin/settings

C. dashboard/[admin]/settings

D. dashboard/{admin}/settings

Solution

1. Step 1: Identify route group syntax

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

2. Step 2: Check options

   Only dashboard/(admin)/settings uses parentheses correctly: (admin). Other options use brackets or braces which are for dynamic routes or invalid.

3. Final Answer:

   dashboard/(admin)/settings -> Option A

4. Quick Check:

   Route groups use parentheses ( ) [OK]

Hint: Route groups use ( ) in folder names [OK]

Common Mistakes:

• Using square brackets [] for route groups
• Using curly braces {} which are invalid
• Confusing dynamic routes with route groups

3. Given this folder structure:

app/
  (marketing)/
    layout.js
    page.js
  (dashboard)/
    layout.js
    dashboard/page.js

What layout will the page at URL / use?

medium

A. Both layouts will be combined

B. The layout from (dashboard) folder

C. No layout will be applied

D. The layout from (marketing) folder

Solution

1. Step 1: Understand route groups and root layouts

   Route groups like (marketing) and (dashboard) separate parts of the app with their own layouts.

2. Step 2: Determine which route group matches URL '/'

   The root URL '/' matches the (marketing) group because it is the default or main group for the homepage.

3. Final Answer:

   The layout from (marketing) folder -> Option D

4. Quick Check:

   URL '/' uses (marketing) layout [OK]

Hint: Root URL uses main route group's layout [OK]

Common Mistakes:

• Assuming dashboard layout applies to '/'
• Thinking layouts combine automatically
• Believing no layout applies by default

4. You created a route group folder named (admin) but your app shows a 404 error when visiting /admin. What is the likely mistake?

medium

A. You forgot to restart the Next.js server

B. Route group folders do not change URLs, so /admin URL does not exist

C. You must add a dynamic route file inside (admin) folder

D. Parentheses in folder names are invalid syntax

Solution

1. Step 1: Understand route groups and URLs

   Route groups using parentheses group routes but do not add to the URL path.

2. Step 2: Check URL vs folder name

   The folder (admin) does not create /admin URL. To have /admin URL, folder must be named 'admin' without parentheses.

3. Final Answer:

   Route group folders do not change URLs, so /admin URL does not exist -> Option B

4. Quick Check:

   Route groups don't add URL segments [OK]

Hint: Route groups don't add URL parts [OK]

Common Mistakes:

• Thinking (admin) folder creates /admin URL
• Believing parentheses are invalid
• Assuming dynamic routes are needed here

5. You want to create two separate main layouts: one for public pages and one for user dashboard pages. You also want URLs like /login and /dashboard/profile. How should you organize your folders using multiple root layouts and route groups?

hard

A. Create app/(public)/layout.js and app/(dashboard)/layout.js, put pages inside each, and use route groups to keep URLs clean

B. Create app/public/layout.js and app/dashboard/layout.js folders without parentheses

C. Put all pages in app/layout.js and use conditional rendering inside layout

D. Use dynamic routes like app/[section]/layout.js to switch layouts

Solution

1. Step 1: Use route groups for separate layouts

   Route groups with parentheses let you organize folders without affecting URLs, perfect for multiple root layouts.

2. Step 2: Organize folders for public and dashboard

   Creating (public) and (dashboard) folders with their own layouts keeps code clean and URLs like /login and /dashboard/profile work as expected.

3. Final Answer:

   Create app/(public)/layout.js and app/(dashboard)/layout.js, put pages inside each, and use route groups to keep URLs clean -> Option A

4. Quick Check:

   Route groups + multiple root layouts = clean URLs and separate designs [OK]

Hint: Use ( ) folders for layouts without changing URLs [OK]

Common Mistakes:

• Not using parentheses, causing URL changes
• Putting all pages under one layout losing separation
• Using dynamic routes incorrectly for layouts