Skip to content

Route Groups

Route groups let you organize routes into logical folders — like (marketing) or (dashboard) — without those folder names appearing in the URL. This lesson covers when and how to use them.

What Are Route Groups?

Normally, every folder inside app/ contributes a segment to the URL. Wrapping a folder name in parentheses, like (marketing), opts it out of that behavior — the folder still organizes files on disk and can still hold its own layout.tsx, but it contributes nothing to the resulting URL.

This is most useful when different sections of your site need different root-level layouts (for example, a marketing site layout vs. an authenticated dashboard layout) while still sharing the same top-level app/ directory and the same root layout above them.

app/
  (marketing)/
    layout.tsx        // marketing-only layout (nav, footer)
    page.tsx           // /  (parentheses are invisible in the URL)
    about/
      page.tsx          // /about
  (dashboard)/
    layout.tsx        // dashboard-only layout (sidebar)
    page.tsx           // /dashboard? No — still /  (careful, see note below)
    settings/
      page.tsx          // /settings

Both (marketing)/page.tsx and (dashboard)/page.tsx would resolve to /, which is a conflict — route groups organize files, but you're still responsible for avoiding duplicate resulting paths.

Route Group Syntax

app/
  (groupName)/       // parentheses = invisible in the URL
    page.tsx           // still whatever path the folder's position implies
  • Wrapping a folder name in parentheses, e.g. (marketing), excludes it from the URL path.
  • Route groups can hold their own layout.tsx, loading.tsx, and error.tsx files.
  • Multiple route groups can exist side by side, each defining a different root layout.
  • Route groups do not create nesting in the URL — a route inside (marketing)/about/ is just /about.

Route Groups Cheat Sheet

How parenthesized folders behave versus regular folders.

File Path Resulting URL
app/(marketing)/about/page.tsx /about
app/(marketing)/contact/page.tsx /contact
app/(shop)/products/page.tsx /products
app/(shop)/products/[id]/page.tsx /products/:id

Multiple Root Layouts with Route Groups

A common pattern is giving each top-level route group its own layout entirely, opting out of a single shared root layout, by placing separate layout.tsx files inside each group and removing shared UI from a single global layout. This is useful when a marketing site and an authenticated app section need drastically different chrome (navigation, fonts, or even <html> attributes).

  • (marketing)/layout.tsx — public site navigation, marketing footer.
  • (app)/layout.tsx — authenticated sidebar, app-specific navigation.
  • Each group's layout only wraps routes inside that specific group.

Using Route Groups Purely for Organization

Even without different layouts, route groups are useful purely for keeping a large app/ directory readable — for example, grouping all authentication-related routes under (auth) so login, register, and forgot-password are visually grouped in the file tree without becoming /auth/login, /auth/register, etc.

app/
  (auth)/
    login/
      page.tsx      // /login (not /auth/login)
    register/
      page.tsx      // /register

Common Mistakes

  • Expecting a route group's name to appear anywhere in the resulting URL.
  • Creating the same resolved path in two different route groups (e.g. two page.tsx files that both resolve to /).
  • Forgetting that a route group can still have its own root layout, and duplicating <html>/<body> if two groups both define one.
  • Using route groups when a simple, regular folder would already achieve the same organizational goal.

Key Takeaways

  • Parenthesized folders, like (marketing), organize routes without affecting the URL.
  • Route groups can hold their own layouts, enabling different chrome for different sections of a site.
  • Two different route groups can define entirely separate root layouts side by side.
  • Be careful not to create duplicate resolved URLs across different route groups.
  • Route groups are purely an organizational tool — they don't change data fetching or rendering behavior.

Pro Tip

Reach for route groups specifically when you need different layouts for different sections of the same app (e.g. marketing vs. dashboard) — if you just want tidier folders with no layout differences, a regular folder name works just as well and is one less concept for new contributors to learn.