Next.js
/Intermediate
Route Groups
Definition
A way to organize files into logical groups using parenthesis `(folderName)` WITHOUT affecting the actual URL structure of the application.
Explain Like I'm New
If you create a folder called `marketing`, the URL becomes `/marketing/about`. But what if you just want to organize your files, and you want the URL to stay `/about`? You wrap the folder in parentheses: `(marketing)`. Next.js will completely ignore the folder name when building URLs.
Real World Example
Separating your app into two massive chunks: `(marketing)` and `(auth)`. Inside `(auth)` you put `login` and `register`. The URLs remain `/login` and `/register`, but your codebase is beautifully organized.
Common Use Cases
- •Code organization
- •Creating multiple root layouts
Terminal Output
bash / terminal
/*
Route Groups Example:
app/
├── (marketing)/ <-- URL ignores this folder!
│ ├── layout.tsx <-- Only applies to marketing pages
│ ├── page.tsx (URL: /)
│ └── about/page.tsx (URL: /about)
│
└── (dashboard)/ <-- URL ignores this folder!
├── layout.tsx <-- Only applies to dashboard pages
├── settings/page.tsx (URL: /settings)
└── billing/page.tsx (URL: /billing)
*/
Interview Questions
basic
- What syntax tells Next.js to ignore a folder when generating URLs?
intermediate
- Besides organization, what is the major architectural reason to use Route Groups?