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.