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.