Route groups with (groupName) in NextJS

Introduction

Route groups help organize routes in Next.js without changing the URL. They keep your files tidy and your URLs clean.

You want to group related pages together in folders but keep URLs simple.

You need to share layout or components among several pages without affecting the URL path.

You want to separate route logic for better project structure without adding extra URL segments.

Syntax

NextJS

app/(groupName)/page.tsx

// Example folder structure:
// app/(admin)/dashboard/page.tsx
// app/(admin)/settings/page.tsx

// The URL will be /dashboard and /settings, not /admin/dashboard or /admin/settings

Route groups are folders wrapped in parentheses like (groupName).

They do not add to the URL path but help organize files.

Examples

Pages inside (marketing) folder show as /home and /about URLs.

NextJS

app/(marketing)/home/page.tsx
app/(marketing)/about/page.tsx

Pages inside (dashboard) folder appear as /profile and /settings URLs.

NextJS

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

Sample Program

Both pages are inside the (admin) group folder. The URLs will be /dashboard and /settings without /admin in the URL.

NextJS

// Folder structure:
// app/(admin)/dashboard/page.tsx
// app/(admin)/settings/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>;
}

Important Notes

Route groups help keep URLs clean while organizing code.

They are useful for sharing layouts or components among grouped pages.

Summary

Route groups use parentheses in folder names to group routes without changing URLs.

They keep your project organized and URLs simple.