Multiple root layouts with route groups in NextJS - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is a root layout in Next.js App Router?

A root layout is a special file named layout.js placed at the root of the app directory or inside route groups. It defines the common UI structure shared by all pages under its folder, like headers or footers.

intermediate

How do route groups help organize layouts in Next.js?

Route groups let you group routes without affecting the URL path. You can create multiple root layouts by placing <code>layout.js</code> files inside different route groups, allowing different UI structures for different parts of your app.

beginner

How do you create a route group in Next.js App Router?

You create a route group by wrapping folder names in parentheses, like (admin). This folder groups routes but does not add to the URL path.

intermediate

What happens if you have multiple root layouts in different route groups?

Each route group can have its own root layout. When you visit a route inside that group, Next.js uses that group's root layout, letting you have different page structures for different sections of your app.

beginner

Why use multiple root layouts with route groups in Next.js?

Using multiple root layouts helps keep your app organized and lets you customize the look and feel for different parts, like having a special admin layout separate from the main site layout.

What folder name syntax creates a route group in Next.js App Router?

A Folder name wrapped in parentheses, e.g., (group)

B Folder name starting with underscore, e.g., _group

C Folder name with dash, e.g., group-folder

D Folder name in uppercase, e.g., GROUP

Route groups use parentheses around folder names to group routes without changing the URL.

Where do you place a root layout file in a route group?

A Only at the root app folder

B Inside the route group folder as layout.js

C Inside the pages folder

D In the public folder

Each route group can have its own layout.js file placed inside the group folder.

What effect do route groups have on the URL path?

A No effect; they do not add to the URL

B They add their name to the URL

C They remove the last segment of the URL

D They redirect to the root URL

Route groups organize routes but do not change the URL structure.

Why might you want multiple root layouts in a Next.js app?

A To reduce the number of files

B To speed up page loading

C To disable routing

D To have different page structures for different app sections

Multiple root layouts let you customize UI for different parts like admin vs main site.

Which file name is used for root layouts in Next.js App Router?

A app.js

B index.js

C layout.js

D root.js

The root layout file is always named layout.js.

Explain how multiple root layouts work with route groups in Next.js App Router.

Think about how you can have different page designs for different parts of a website without changing the URL.

Describe the benefits of using multiple root layouts with route groups in a Next.js project.

Consider how separating admin pages from user pages visually and structurally helps developers and users.

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