Route groups with (groupName) in NextJS - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is a route group in Next.js App Router?

A route group is a folder in the app directory that groups routes together without affecting the URL path. It helps organize routes without changing the visible URL structure.

beginner

How do you create a route group in Next.js using (groupName)?

You create a folder with parentheses around the group name, like (groupName), inside the app directory. This folder groups routes but does not add the groupName to the URL path.

intermediate

Why use route groups in Next.js instead of normal folders?

Route groups help keep your file structure clean and organized without changing the URL. This is useful when you want to group related pages but keep URLs simple and user-friendly.

beginner

Example: What URL does the route /app/(admin)/dashboard render if dashboard.js is inside (admin)?

The URL will be /app/dashboard because the (admin) folder is a route group and does not add to the URL path.

intermediate

Can route groups contain nested route groups in Next.js?

Yes, route groups can be nested inside other route groups to organize complex route structures without affecting the URL paths.

What does a folder named (admin) inside the app directory do in Next.js?

A Adds 'admin' to the URL path

B Groups routes without changing the URL path

C Creates a new API route

D Deletes all routes inside it

Folders with parentheses like (admin) group routes but do not add their name to the URL.

If you want to organize routes but keep URLs clean, what should you use?

A Normal folders without parentheses

B Static files

C API routes

D Route groups with (groupName)

Route groups let you organize routes without changing the URL path.

Which of these is true about route groups in Next.js?

A They do not affect the URL path

B They are deprecated

C They only work for API routes

D They change the URL path to include the group name

Route groups do not affect the URL path; they only organize files.

How do you name a folder to make it a route group?

A Use a dot before the folder name

B Prefix the folder name with an underscore

C Wrap the folder name in parentheses, like (groupName)

D Add a dash before the folder name

Parentheses around the folder name create a route group.

Can route groups be nested inside each other?

A Yes, nesting is allowed

B No, nesting is not allowed

C Only one level of nesting is allowed

D Only for API routes

Route groups can be nested to organize complex routes.

Explain what route groups with (groupName) are in Next.js and why they are useful.

Think about how to organize routes without changing what users see in the URL.

Describe how you would structure folders using route groups to keep URLs simple but organize many related pages.

Focus on folder naming and URL impact.

Practice

1. What is the main purpose of using route groups with (groupName) in Next.js?

easy

A. To organize routes in folders without changing the URL structure

B. To change the URL path to include the group name

C. To create dynamic routes with parameters

D. To add middleware to specific routes

Solution

1. Step 1: Understand route groups concept

   Route groups use parentheses in folder names to group routes logically without affecting the URL path.

2. Step 2: Compare URL effect

   Since the URL does not include the group name, the main purpose is organization, not URL change.

3. Final Answer:

   To organize routes in folders without changing the URL structure -> Option A

4. Quick Check:

   Route groups = organize without URL change [OK]

Hint: Parentheses folders group routes but keep URLs clean [OK]

Common Mistakes:

• Thinking group name appears in URL
• Confusing with dynamic route parameters
• Assuming it adds middleware automatically

2. Which of the following folder names correctly creates a route group named admin in Next.js?

easy

A. admin

B. (admin)

C. [admin]

D. {admin}

Solution

1. Step 1: Identify route group syntax

   Route groups use parentheses around the folder name, like (groupName).

2. Step 2: Match folder name

   The folder named (admin) correctly creates a route group called admin.

3. Final Answer:

   (admin) -> Option B

4. Quick Check:

   Parentheses folder = route group [OK]

Hint: Use parentheses for route groups, not brackets or braces [OK]

Common Mistakes:

• Using square brackets which are for dynamic routes
• Using curly braces which are invalid
• Omitting parentheses and creating normal folders

3. Given this folder structure in Next.js app router:

app/(dashboard)/page.tsx
app/(dashboard)/settings/page.tsx
app/profile/page.tsx

What URL paths will be available?

medium

A. /, /settings, /profile

B. /(dashboard), /(dashboard)/settings, /profile

C. /dashboard, /dashboard/settings, /profile

D. /dashboard, /settings, /profile

Solution

1. Step 1: Understand route groups effect on URLs

   Folders with parentheses group routes but do not add to URL path.

2. Step 2: Map folder names to URLs

   The (dashboard) group is invisible in URL, so app/(dashboard)/page.tsx maps to / because the page.tsx inside is the root of that group. Similarly, app/(dashboard)/settings/page.tsx maps to /settings. The app/profile/page.tsx maps to /profile.

3. Final Answer:

   /, /settings, /profile -> Option D

4. Quick Check:

   Route groups hide folder name but keep nested paths [OK]

Hint: Route groups hide folder name but keep nested routes [OK]

Common Mistakes:

• Including parentheses folder name in URL
• Ignoring nested folder names inside groups
• Assuming root group maps to root URL

4. You created a folder named (admin) inside app but your routes under it are not working. What is the most likely mistake?

medium

A. You forgot to add a page.tsx file inside the (admin) folder

B. You used square brackets instead of parentheses for the folder name

C. You named the folder admin without parentheses

D. You placed the (admin) folder outside the app directory

Solution

1. Step 1: Check route group folder requirements

   Route groups require a page.tsx or similar file inside to define the route component.

2. Step 2: Identify missing page file issue

   If routes inside (admin) don't work, missing page.tsx is the most common cause.

3. Final Answer:

   You forgot to add a page.tsx file inside the (admin) folder -> Option A

4. Quick Check:

   Missing page.tsx = no route rendered [OK]

Hint: Always add page.tsx inside route group folders [OK]

Common Mistakes:

• Confusing folder naming syntax
• Placing folders outside app directory
• Assuming route groups auto-create pages

5. You want to create two separate route groups (marketing) and (sales) inside app with pages home.tsx and contact.tsx each. How should you organize folders so URLs are /home and /contact without group names in URL?

hard

A. app/(marketing)/home.tsx and app/(sales)/contact/page.tsx

B. app/(marketing)/home.tsx and app/(marketing)/(sales)/contact.tsx

C. app/(marketing)/home.tsx and app/(sales)/contact.tsx

D. app/home.tsx and app/contact.tsx

Solution

1. Step 1: Use route groups to hide folder names

   Folders named with parentheses group routes without adding to URL path.

2. Step 2: Place pages inside separate route groups

   Placing home.tsx inside (marketing) and contact.tsx inside (sales) keeps URLs as /home and /contact.

3. Final Answer:

   app/(marketing)/home.tsx and app/(sales)/contact.tsx -> Option C

4. Quick Check:

   Separate groups hide folder names, URLs stay clean [OK]

Hint: Put pages inside separate parentheses folders for clean URLs [OK]

Common Mistakes:

• Nesting groups causing longer URLs
• Placing pages outside groups losing organization
• Using page.tsx inconsistently inside groups