Route groups with (groupName) in NextJS - Deep Dive

Overview - Route groups with (groupName)

What is it?

Route groups with (groupName) in Next.js allow you to organize your app's routes into logical groups without affecting the URL structure. They help keep your file system clean and maintainable by grouping related pages together. This grouping is done by wrapping folders in parentheses, which Next.js treats as invisible in the URL path. This means you can structure your code better without changing how users see or navigate your site.

Why it matters

Without route groups, large Next.js projects can become messy and hard to manage because every folder directly affects the URL. This can lead to long, complicated URLs or duplicated code. Route groups solve this by letting developers organize files for clarity and reusability while keeping URLs simple and user-friendly. This improves developer productivity and user experience.

Where it fits

Before learning route groups, you should understand Next.js routing basics and file-based routing. After mastering route groups, you can explore advanced routing features like dynamic routes, nested layouts, and middleware. Route groups fit into the journey as a way to scale your app's structure cleanly.

Mental Model

Core Idea

Route groups let you organize your route files in folders that don't change the URL, keeping code tidy without changing navigation paths.

Think of it like...

It's like having labeled folders inside a filing cabinet that only you see, while visitors to your office only see the main drawers labeled clearly without the extra folders inside.

┌─────────────┐
│ app/        │
│ ├─ (admin)/ │  <-- Route group folder, invisible in URL
│ │  ├─ page.js│  URL: /dashboard
│ ├─ home/    │  URL: /home
└─────────────┘

Build-Up - 7 Steps

1

Foundation

Understanding Next.js File Routing

Concept: Next.js uses files and folders inside the app directory to create routes automatically.

In Next.js, each file named page.js inside the app folder becomes a route. For example, app/home/page.js maps to /home URL. Folders create nested routes, so app/blog/post/page.js maps to /blog/post.

Result

You get a URL structure that matches your folder and file layout.

Understanding this basic file-to-route mapping is essential before learning how route groups change folder structure without changing URLs.

2

Foundation

Why Folder Structure Affects URLs

Concept: Folders in the app directory directly map to URL paths by default.

If you create a folder named 'admin' inside app, it adds /admin to the URL. This means every folder changes the URL path, which can make URLs long or messy if you want to organize code deeply.

Result

Your URL paths reflect every folder you create, which can be limiting for organizing code cleanly.

Knowing this limitation explains why route groups are needed to separate code organization from URL structure.

3

Intermediate

Introducing Route Groups with Parentheses

🤔Before reading on: do you think adding a folder with parentheses changes the URL path or not? Commit to your answer.

Concept: Folders wrapped in parentheses are route groups that do not add to the URL path.

If you create a folder named (admin) inside app, Next.js treats it as a group folder. Files inside (admin) appear in the URL as if (admin) does not exist. For example, app/(admin)/dashboard/page.js maps to /dashboard, not /admin/dashboard.

Result

You can organize files inside (admin) without changing the URL structure.

Understanding that parentheses create invisible folders lets you separate code organization from URL design.

4

Intermediate

Using Multiple Route Groups Together

🤔Before reading on: can you nest multiple route groups and still keep URLs clean? Commit to your answer.

Concept: You can nest multiple route groups to organize complex apps without affecting URLs.

For example, app/(admin)/(settings)/profile/page.js maps to /profile URL. Both (admin) and (settings) folders are invisible in the URL but help organize code into logical sections.

Result

Deeply nested folders can keep code clean while URLs stay simple.

Knowing you can stack route groups helps manage large projects with many features.

5

Intermediate

Route Groups and Layout Sharing

Concept: Route groups can be used to share layouts or components among grouped routes without affecting URLs.

You can place a layout.js file inside a route group folder to apply a layout to all pages inside that group. For example, app/(admin)/layout.js wraps all pages inside (admin) with the same layout, even though (admin) is invisible in URLs.

Result

You get consistent UI sections grouped logically in code but not in URL paths.

This shows how route groups help organize both code and UI structure independently from URLs.

6

Advanced

Route Groups Impact on Middleware and Caching

🤔Before reading on: do you think route groups affect middleware matching or caching behavior? Commit to your answer.

Concept: Route groups do not affect middleware matching or caching keys because they are invisible in URLs.

Middleware runs based on URL paths, so folders in parentheses do not change middleware behavior. Similarly, caching keys use the URL, so route groups don't affect cache hits or misses.

Result

Middleware and caching behave consistently regardless of route group structure.

Understanding this prevents confusion when debugging middleware or cache issues in apps using route groups.

7

Expert

Internal Handling of Route Groups in Next.js

🤔Before reading on: do you think route groups are just folder name tricks or have deeper routing system integration? Commit to your answer.

Concept: Next.js routing system parses folder names and ignores those in parentheses when building URL paths but uses them internally for code organization and layout resolution.

At build time, Next.js scans the app folder and strips out parentheses folders from URL paths. However, it keeps them in the module graph to resolve layouts, loading states, and error boundaries scoped to those groups. This dual handling allows invisible grouping without losing structural benefits.

Result

Route groups work seamlessly for both URL routing and code organization with no URL side effects.

Knowing this internal duality explains why route groups are powerful yet invisible to users.

Under the Hood

Next.js routing system scans the app directory and treats folders wrapped in parentheses as special groups. These groups are excluded from the URL path generation but remain part of the internal routing tree. This allows layouts, error boundaries, and loading states to be scoped to these groups. The build process strips parentheses folders from URLs but keeps their structure for module resolution and rendering order.

Why designed this way?

This design balances two needs: developers want clean, maintainable code organization without forcing URL changes, and users want simple, predictable URLs. Alternatives like ignoring folder structure or using config files were less intuitive or more complex. Parentheses provide a simple, explicit syntax that fits naturally into Next.js's file-based routing.

app/
├─ (groupName)/   <-- invisible in URL
│  ├─ layout.js   <-- layout for group
│  ├─ page.js     <-- route page
├─ home/
│  ├─ page.js     <-- route page

URL paths:
/groupName/page.js  --> /page
/home/page.js       --> /home

Myth Busters - 4 Common Misconceptions

Quick: Does a folder named (admin) appear in the URL path? Commit yes or no.

Common Belief: Folders with parentheses still add their name to the URL path like normal folders.

Reality: Folders wrapped in parentheses are completely invisible in the URL path and do not add to the URL.

Why it matters: Believing this causes confusion when URLs don't match folder names, leading to wasted time debugging routing issues.

Quick: Can route groups affect middleware URL matching? Commit yes or no.

Common Belief: Route groups change the URL path, so middleware matching must consider them.

Reality: Middleware matches URLs as seen by users; route groups do not affect URLs and thus do not affect middleware matching.

Why it matters: Misunderstanding this can cause incorrect middleware logic or unexpected behavior in request handling.

Quick: Are route groups only for visual code organization? Commit yes or no.

Common Belief: Route groups only help organize files visually and have no effect on layouts or error boundaries.

Reality: Route groups also scope layouts, error boundaries, and loading states, affecting rendering behavior.

Why it matters: Ignoring this limits how developers use route groups to build modular UI sections.

Quick: Can you nest route groups inside each other infinitely without URL changes? Commit yes or no.

Common Belief: Nesting route groups adds their names to the URL path cumulatively.

Reality: Nesting multiple route groups still keeps all their folder names invisible in the URL path.

Why it matters: This misconception limits developers from deeply organizing code without fearing URL complexity.

Expert Zone

1

Route groups influence the module graph and layout resolution even though they are invisible in URLs, affecting rendering order subtly.

2

Using route groups can improve build performance by reducing route complexity in the URL space while keeping code modular.

3

Route groups interact with dynamic routes and parallel routes in nuanced ways that require careful folder naming to avoid conflicts.

When NOT to use

Avoid route groups when you want folder names to appear in URLs for SEO or user clarity. Instead, use normal folders or dynamic routes. Also, if your app is very small, route groups may add unnecessary complexity.

Production Patterns

In large Next.js apps, route groups are used to separate admin, user, and public sections without URL clutter. They help share layouts and error boundaries per group. Teams use them to organize feature folders and isolate code ownership while keeping URLs clean and stable.

Connections

Modular CSS Architecture

Both separate concerns internally without affecting the final output directly.

Understanding route groups helps grasp how modular CSS scopes styles internally without changing the rendered page structure.

Unix Hidden Files and Folders

Route groups are like hidden folders that organize files but are invisible to users.

Knowing how hidden files work in Unix systems clarifies how route groups keep code organized without exposing folder names in URLs.

Object-Oriented Programming Encapsulation

Route groups encapsulate routes and layouts internally, hiding implementation details from the URL interface.

This connection shows how encapsulation principles apply beyond code to routing and UI structure.

Common Pitfalls

#1 Expecting route group folder names to appear in URLs.

Wrong approach:

app/(admin)/dashboard/page.js // expecting URL: /admin/dashboard

Correct approach:

app/(admin)/dashboard/page.js // actual URL: /dashboard

Root cause:

Misunderstanding that parentheses folders are invisible in URLs.

#2 Placing layout.js outside route groups expecting it to apply inside.

Wrong approach:

app/layout.js applies layout to pages inside (admin) folder.

Correct approach:

app/(admin)/layout.js applies layout to pages inside (admin) group.

Root cause:

Not realizing layouts must be inside the route group folder to scope correctly.

#3 Using route groups for small apps with simple routing.

Wrong approach:

Adding multiple nested route groups in a tiny app with few pages.

Correct approach:

Use simple folders without route groups for small apps.

Root cause:

Overengineering folder structure without need.

Key Takeaways

Route groups in Next.js let you organize route files in folders that do not affect the URL path, keeping URLs clean.

Folders wrapped in parentheses are invisible in URLs but still affect layout and error boundary scoping internally.

This feature helps large projects stay maintainable by separating code organization from user-facing URLs.

Middleware and caching behave based on URLs, so route groups do not impact their behavior.

Understanding route groups unlocks advanced routing patterns and better UI structure management in Next.js.

Practice

1. What is the main purpose of using route groups with (groupName) in Next.js?

easy

A. To organize routes in folders without changing the URL structure

B. To change the URL path to include the group name

C. To create dynamic routes with parameters

D. To add middleware to specific routes

Solution

1. Step 1: Understand route groups concept

   Route groups use parentheses in folder names to group routes logically without affecting the URL path.

2. Step 2: Compare URL effect

   Since the URL does not include the group name, the main purpose is organization, not URL change.

3. Final Answer:

   To organize routes in folders without changing the URL structure -> Option A

4. Quick Check:

   Route groups = organize without URL change [OK]

Hint: Parentheses folders group routes but keep URLs clean [OK]

Common Mistakes:

• Thinking group name appears in URL
• Confusing with dynamic route parameters
• Assuming it adds middleware automatically

2. Which of the following folder names correctly creates a route group named admin in Next.js?

easy

A. admin

B. (admin)

C. [admin]

D. {admin}

Solution

1. Step 1: Identify route group syntax

   Route groups use parentheses around the folder name, like (groupName).

2. Step 2: Match folder name

   The folder named (admin) correctly creates a route group called admin.

3. Final Answer:

   (admin) -> Option B

4. Quick Check:

   Parentheses folder = route group [OK]

Hint: Use parentheses for route groups, not brackets or braces [OK]

Common Mistakes:

• Using square brackets which are for dynamic routes
• Using curly braces which are invalid
• Omitting parentheses and creating normal folders

3. Given this folder structure in Next.js app router:

app/(dashboard)/page.tsx
app/(dashboard)/settings/page.tsx
app/profile/page.tsx

What URL paths will be available?

medium

A. /, /settings, /profile

B. /(dashboard), /(dashboard)/settings, /profile

C. /dashboard, /dashboard/settings, /profile

D. /dashboard, /settings, /profile

Solution

1. Step 1: Understand route groups effect on URLs

   Folders with parentheses group routes but do not add to URL path.

2. Step 2: Map folder names to URLs

   The (dashboard) group is invisible in URL, so app/(dashboard)/page.tsx maps to / because the page.tsx inside is the root of that group. Similarly, app/(dashboard)/settings/page.tsx maps to /settings. The app/profile/page.tsx maps to /profile.

3. Final Answer:

   /, /settings, /profile -> Option D

4. Quick Check:

   Route groups hide folder name but keep nested paths [OK]

Hint: Route groups hide folder name but keep nested routes [OK]

Common Mistakes:

• Including parentheses folder name in URL
• Ignoring nested folder names inside groups
• Assuming root group maps to root URL

4. You created a folder named (admin) inside app but your routes under it are not working. What is the most likely mistake?

medium

A. You forgot to add a page.tsx file inside the (admin) folder

B. You used square brackets instead of parentheses for the folder name

C. You named the folder admin without parentheses

D. You placed the (admin) folder outside the app directory

Solution

1. Step 1: Check route group folder requirements

   Route groups require a page.tsx or similar file inside to define the route component.

2. Step 2: Identify missing page file issue

   If routes inside (admin) don't work, missing page.tsx is the most common cause.

3. Final Answer:

   You forgot to add a page.tsx file inside the (admin) folder -> Option A

4. Quick Check:

   Missing page.tsx = no route rendered [OK]

Hint: Always add page.tsx inside route group folders [OK]

Common Mistakes:

• Confusing folder naming syntax
• Placing folders outside app directory
• Assuming route groups auto-create pages

5. You want to create two separate route groups (marketing) and (sales) inside app with pages home.tsx and contact.tsx each. How should you organize folders so URLs are /home and /contact without group names in URL?

hard

A. app/(marketing)/home.tsx and app/(sales)/contact/page.tsx

B. app/(marketing)/home.tsx and app/(marketing)/(sales)/contact.tsx

C. app/(marketing)/home.tsx and app/(sales)/contact.tsx

D. app/home.tsx and app/contact.tsx

Solution

1. Step 1: Use route groups to hide folder names

   Folders named with parentheses group routes without adding to URL path.

2. Step 2: Place pages inside separate route groups

   Placing home.tsx inside (marketing) and contact.tsx inside (sales) keeps URLs as /home and /contact.

3. Final Answer:

   app/(marketing)/home.tsx and app/(sales)/contact.tsx -> Option C

4. Quick Check:

   Separate groups hide folder names, URLs stay clean [OK]

Hint: Put pages inside separate parentheses folders for clean URLs [OK]

Common Mistakes:

• Nesting groups causing longer URLs
• Placing pages outside groups losing organization
• Using page.tsx inconsistently inside groups