Route Groups in Next.js

Route Groups allow you to organize routes in the app directory without affecting the URL structure.

What is a Route Group?

A route group is a folder wrapped in parentheses. The folder name is ignored in the URL path but used for structuring files.

app/
 ├── (auth)/
 │   ├── login/
 │   │   └── page.js   → /login
 │   └── register/
 │       └── page.js   → /register

Even though (auth) exists in the folder structure, it does not appear in the browser URL.

Why Use Route Groups?

Route groups help you organize related routes without creating unwanted URL segments.

Real World Example

Think of route groups like folders in your computer used only for organization.

Desktop/
 ├── Work/
 └── Personal/

The folder helps you stay organized but does not affect the file path.

Route Groups with Layouts

Route groups are often used with layouts to apply different layouts to different sections of an app.

app/
 ├── (auth)/
 │   ├── layout.js     → Auth layout
 │   ├── login/
 │   │   └── page.js
 │   └── register/
 │       └── page.js
 ├── (main)/
 │   ├── layout.js     → Main layout
 │   └── page.js

Why Route Groups Are Important

Route groups improve project structure, allow layout separation, and keep URLs clean and user-friendly.