Topic 9 of 39
Route Groups
Overview
Route Groups allow you to organize your files into logical folders WITHOUT affecting the URL path. You create them by wrapping a folder name in parentheses (folderName). This is highly useful for applying different layouts to different sections of the same URL level.
Syntax
bash
app/
├── (marketing)/ # Route Group (Ignored in URL)
│ ├── about/page.tsx # URL: /about
│ └── layout.tsx # Marketing layout
├── (app)/ # Route Group (Ignored in URL)
│ ├── dashboard/page.tsx # URL: /dashboard
│ └── layout.tsx # Application layoutCommon Pitfalls
- Creating routes with the same URL path inside different route groups (e.g.,
(group1)/about/page.tsxand(group2)/about/page.tsx). This causes a build error. - Overusing them for minor organizational things when standard nested folders would suffice.
Interview Questions
Q:
How do you apply a layout to a specific set of pages without changing their URL structure?
A:
By placing those pages inside a Route Group (a folder with parentheses like (marketing)). You can then add a layout.tsx to that group which will wrap the pages without adding /marketing to the URL.
Real-World Example
Separating authentication pages from the main app layout.
example
bash
app/
├── (auth)/
│ ├── layout.tsx # Minimal layout (no navbar)
│ ├── login/page.tsx # /login
│ └── signup/page.tsx# /signup
├── (main)/
│ ├── layout.tsx # Main layout (with navbar/footer)
│ └── page.tsx # / (Homepage)Check Your Knowledge
Test your understanding of Route Groups with these quick questions.