Route groups with (groupName) in NextJS - Step-by-Step Execution

Concept Flow - Route groups with (groupName)

Start: Define route group folder

↓

Add (groupName) folder

↓

Place pages/components inside group

↓

Next.js reads routes

↓

Group folder ignored in URL

↓

Render pages as normal

↓

End

Next.js reads route groups as folders with (groupName) and ignores them in the URL, organizing routes without changing paths.

Execution Sample

NextJS

app/(admin)/dashboard/page.tsx
export default function Dashboard() {
  return <h1>Admin Dashboard</h1>
}

Defines a page inside a route group folder (admin) that does not appear in the URL but organizes routes.

Execution Table

Step	Action	Folder/Route	URL Path	Result
1	Create folder with (admin)	app/(admin)	/	Folder created but ignored in URL
2	Add page.tsx inside (admin)	app/(admin)/dashboard/page.tsx	/dashboard	Page route is /dashboard
3	Next.js reads routes	app/(admin)/dashboard/page.tsx	/dashboard	Route registered as /dashboard
4	User visits /dashboard	N/A	/dashboard	Renders Admin Dashboard page
5	User visits /admin/dashboard	N/A	/admin/dashboard	404 Not Found (no such route)

💡 Route group folder (admin) is ignored in URL, so /dashboard works but /admin/dashboard does not.

Variable Tracker

Variable	Start	After Step 1	After Step 2	After Step 3	Final
Route Path	N/A	N/A	/dashboard	/dashboard	/dashboard
Folder Name	N/A	(admin)	(admin)/dashboard	(admin)/dashboard	(admin)/dashboard

Key Moments - 2 Insights

Why doesn't the folder name (admin) appear in the URL path?

Because Next.js ignores folders with parentheses in the URL, as shown in execution_table step 1 and 3.

What happens if I try to visit /admin/dashboard in the browser?

You get a 404 error because the route group folder is not part of the URL, as shown in execution_table step 5.

Visual Quiz - 3 Questions

Look at the execution_table, what is the URL path for the page inside (admin)/dashboard at step 3?

A /(admin)/dashboard

B /admin/dashboard

C /dashboard

D /admin

💡 Hint

Check the 'URL Path' column at step 3 in the execution_table.

At which step does Next.js register the route ignoring the group folder?

A Step 3

B Step 2

C Step 1

D Step 5

💡 Hint

Look for when the route path is set in the execution_table.

If you rename (admin) to admin (without parentheses), what happens to the URL path?

A URL path remains /dashboard

B URL path includes /admin/dashboard

C Route breaks and 404 always shows

D URL path becomes /(admin)/dashboard

💡 Hint

Route groups with parentheses are ignored in URL; removing them includes folder name in URL.

Concept Snapshot

Route groups in Next.js use folders named with parentheses, like (groupName).
These folders organize routes but do NOT appear in the URL path.
Pages inside route groups render normally at paths ignoring the group folder.
Use route groups to keep URLs clean while structuring code.
Example: app/(admin)/dashboard/page.tsx maps to /dashboard URL.

Full Transcript

In Next.js, route groups are folders named with parentheses, such as (admin). These folders help organize your app's routes without adding extra parts to the URL. When Next.js reads the routes, it ignores the group folder name in the URL path. For example, a page inside app/(admin)/dashboard/page.tsx will be accessible at /dashboard, not /admin/dashboard. This lets you keep your code organized without changing the URLs users see. If you try to visit /admin/dashboard, it will not work because the group folder is not part of the URL. This feature helps keep URLs clean and simple while allowing flexible folder structures.

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