How to Create Route Group in Next.js: Simple Guide

In Next.js, you create a route group by wrapping folders in parentheses like (groupName) inside the app directory. This groups routes without affecting the URL path, helping organize your routes cleanly.

Syntax

To create a route group in Next.js, place your route folders inside a folder named with parentheses. For example, (admin) groups routes under it without adding /admin to the URL.

Structure:

• app/(groupName)/route - groups routes under groupName but URL stays as /route

plaintext

app/
  (admin)/
    dashboard/page.tsx
    settings/page.tsx
  home/page.tsx

Example

This example shows how to group admin routes without changing their URL paths. The dashboard and settings pages are grouped under (admin), but URLs remain /dashboard and /settings.

tsx

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

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

// app/(admin)/settings/page.tsx
export default function Settings() {
  return <h1>Admin Settings</h1>;
}

// app/page.tsx
export default function Home() {
  return <h1>Home Page</h1>;
}

Output

Visiting /dashboard shows 'Admin Dashboard'.
Visiting /settings shows 'Admin Settings'.
Visiting / shows 'Home Page'.

Common Pitfalls

Common mistakes when using route groups include:

• Expecting the group folder name to appear in the URL. It does not.
• Using parentheses incorrectly, like missing them or placing them in the wrong folder.
• Confusing route groups with nested routes that affect URLs.

Remember, route groups only organize files and do not change the URL structure.

plaintext

/* Wrong: folder named 'admin' without parentheses adds to URL */
app/
  admin/
    dashboard/page.tsx

/* Right: folder named '(admin)' groups routes without URL change */
app/
  (admin)/
    dashboard/page.tsx

Quick Reference

Concept	Description	Effect on URL
(groupName) folder	Groups routes inside without adding to URL	No change
Normal folder	Creates nested route segment	Adds folder name to URL
Page file (page.tsx)	Defines a route page	Renders at URL path
Route group usage	Organizes routes for cleaner structure	No URL impact

Key Takeaways

Use parentheses around folder names in the app directory to create route groups in Next.js.

Route groups organize routes without changing the URL path.

Do not expect the group folder name to appear in the URL.

Route groups help keep your route files clean and manageable.

Incorrect folder naming can cause unexpected URL paths.