Route Groups and Project Organization
Using (parentheses) and _underscore folders to organize routes and colocate files without changing any URLs.
2 min de lectura
Because every folder inside app/ normally becomes part of the URL, organizing a large app can feel constrained — what if you want to group login and signup together as "auth" pages, without the URL becoming /auth/login? Route groups solve exactly this.
Route groups: (folderName)
Wrapping a folder name in parentheses excludes it from the URL entirely — it exists purely to organize files and layouts:
app/
├── (marketing)/
│ ├── layout.tsx # marketing-only layout (nav, footer)
│ ├── page.tsx → /
│ └── about/
│ └── page.tsx → /about
└── (shop)/
├── layout.tsx # different layout — cart icon, etc.
└── cart/
└── page.tsx → /cart(marketing) and (shop) never appear in the URL — /about and /cart are exactly what visitors type. What you gain is the ability to give each group its own root-adjacent layout, so /about and /cart can look completely different even though both sit one level below app/.
This is also how you'd give a whole section of a site — say, a documentation area versus a marketing site — a genuinely separate <html>/<body> by defining more than one root layout, one per group, after removing the top-level app/layout.tsx.
Private folders: _folderName
Prefixing a folder with an underscore opts it (and everything inside it) out of routing completely, even if it contains a page.tsx:
app/
└── blog/
├── page.tsx
├── _components/
│ └── PostCard.tsx # not a route, even though it's inside app/
└── _lib/
└── formatDate.tsYou don't strictly need this — files without a page.tsx or route.ts are already safe to colocate inside app/ without becoming routes. The underscore is mainly useful for signaling intent clearly, and for avoiding accidental collisions with Next.js's own special filenames as new ones get added over time.
A common pattern: grouping by layout need
A frequent real-world use of route groups is separating logged-in and logged-out experiences that live at the same URL depth:
app/
├── (public)/
│ ├── layout.tsx # simple layout, marketing nav
│ ├── page.tsx
│ └── pricing/page.tsx
└── (app)/
├── layout.tsx # authenticated shell, sidebar nav
├── dashboard/page.tsx
└── settings/page.tsxBoth groups can sit directly under app/ with no shared parent layout forcing a compromise between "marketing site nav" and "dashboard sidebar." Each route only picks up the layout for the group it's actually in.
Keep it boring
Route groups and private folders are organizational tools, not routing features on their own — nothing about how a page is rendered changes because it's inside (something). Reach for them once a project's file tree is hard to scan, not on day one of a new app.