Multiple root layouts with route groups in NextJS - Step-by-Step Execution

Concept Flow - Multiple root layouts with route groups

Start: User visits URL

↓

Match route group folder

↓

Load root layout for group

↓

Render nested layouts/pages

↓

Display final page with correct layout

↓

End

When a user visits a URL, Next.js finds the matching route group folder, loads its root layout, then renders nested layouts and pages inside it, showing the final page with the correct layout.

Execution Sample

NextJS

app/
  (admin)/
    layout.tsx
    dashboard/page.tsx
  (marketing)/
    layout.tsx
    home/page.tsx

This folder structure shows two route groups, each with its own root layout and pages.

Execution Table

Step	URL Visited	Route Group Matched	Layout Loaded	Page Rendered	Output
1	/dashboard	(admin)	app/(admin)/layout.tsx	app/(admin)/dashboard/page.tsx	Admin dashboard page with admin layout
2	/home	(marketing)	app/(marketing)/layout.tsx	app/(marketing)/home/page.tsx	Marketing home page with marketing layout
3	/	No matching group	app/layout.tsx (root)	app/page.tsx (root)	Default root layout and page
4	End	-	-	-	No more routes to match

💡 Execution stops after rendering the matched page with its route group layout or default root layout if no group matches.

Variable Tracker

Variable	Start	After Step 1	After Step 2	After Step 3	Final
URL	-	/dashboard	/home	/	-
Route Group	-	(admin)	(marketing)	none	-
Layout Loaded	-	app/(admin)/layout.tsx	app/(marketing)/layout.tsx	app/layout.tsx	-
Page Rendered	-	app/(admin)/dashboard/page.tsx	app/(marketing)/home/page.tsx	app/page.tsx	-

Key Moments - 2 Insights

Why does Next.js load a different layout for /dashboard and /home?

Because each URL matches a different route group folder ((admin) vs (marketing)), Next.js loads the root layout inside that group folder as shown in execution_table steps 1 and 2.

What happens if the URL does not match any route group?

Next.js falls back to the default root layout at app/layout.tsx and renders the root page, as shown in execution_table step 3.

Visual Quiz - 3 Questions

Look at the execution table. Which layout is loaded when visiting /home?

A app/layout.tsx

B app/(admin)/layout.tsx

C app/(marketing)/layout.tsx

D No layout is loaded

💡 Hint

Check the 'Layout Loaded' column for step 2 in the execution_table.

At which step does Next.js use the default root layout?

A Step 1

B Step 3

C Step 2

D Step 4

💡 Hint

Look at the 'Route Group Matched' and 'Layout Loaded' columns in execution_table.

If a new route group (blog) is added, how would the execution_table change for /post?

A A new row with route group (blog) and its layout loaded

B It would use the (admin) layout

C It would use the default root layout

D No change, /post won't render

💡 Hint

Route groups map URLs to layouts as shown in steps 1 and 2.

Concept Snapshot

Multiple root layouts let you group routes visually.
Create folders with parentheses like (admin) or (marketing).
Each group folder has its own layout.tsx.
Next.js loads the layout matching the URL's group.
If no group matches, default root layout is used.
This helps organize big apps with different page styles.

Full Transcript

When a user visits a URL in a Next.js app using multiple root layouts with route groups, the framework first checks which route group folder matches the URL. Each route group is a folder named with parentheses, like (admin) or (marketing). Next.js then loads the root layout file inside that group folder, for example app/(admin)/layout.tsx. After loading the layout, it renders the nested pages inside that group, such as app/(admin)/dashboard/page.tsx. If the URL does not match any route group, Next.js falls back to the default root layout at app/layout.tsx and renders the root page. This system helps organize large apps by grouping routes and layouts logically. The execution table shows how different URLs load different layouts and pages step-by-step. Variables like URL, route group, layout loaded, and page rendered change as the app processes each request. Understanding this flow helps beginners see how Next.js picks the right layout for each route group.