Why Route groups with (groupName) in NextJS? - Purpose & Use Cases

The Big Idea

Discover how to keep your code neat and URLs clean without compromise!

The Scenario

Imagine building a website with many pages and trying to organize them by folders manually, but you want some pages grouped logically without changing their URL paths.

The Problem

Manually managing folders for routes can clutter URLs or force awkward folder structures, making it hard to keep code clean and URLs user-friendly.

The Solution

Route groups with (groupName) let you group pages in the file system for better code organization without affecting the URL structure, keeping URLs clean and code tidy.

Before vs After

✗ Before

app/dashboard/settings/page.tsx  // URL: /dashboard/settings
app/dashboard/profile/page.tsx   // URL: /dashboard/profile

✓ After

app/dashboard/(admin)/settings/page.tsx  // URL: /dashboard/settings
app/dashboard/(admin)/profile/page.tsx   // URL: /dashboard/profile

What It Enables

This lets you organize your app's code clearly while keeping URLs simple and user-friendly.

Real Life Example

Think of an online store where admin pages are grouped in code but don't show extra folder names in the URL, making links neat and easy to share.

Key Takeaways

Manual folder structure can clutter URLs and code.

Route groups organize code without changing URLs.

Clean URLs and tidy code make development easier and user experience better.