Route Groups

The problem

You want different layouts for different sections of the app (marketing vs app), but you don't want /marketing/… in the URL. Route groups solve this.

The convention

Wrap a folder name in parentheses: (marketing), (app). The parens are stripped from the URL, so app/(marketing)/about/page.tsx serves /about, not /marketing/about.

What you can do with them

Different layouts per section without affecting URLs.
Multiple root layouts — each group can declare its own layout.tsx at the root of the group, including different <html> and <body>.
Organization-only grouping when you just want to keep a folder tree tidy.

Name route groups after product regions or ownership boundaries that developers need to see but users should not see in the URL. Groups are especially useful when marketing and the signed-in application need separate layout trees while preserving short public paths. Invisible folders still have a cognitive cost. Nested groups without a layout or ownership reason move the source farther from the URL and make collisions harder to notice. Remove the parentheses mentally and inspect the final path before assuming two different source folders are safe. Generate or write the final URL list with group names removed, and check it for duplicates. Navigate between two groups with different root layouts and within one group with local state. The observed reload and state boundaries should be intentional.

Code

Two layouts, no URL impact·text

app/
├── (marketing)/
│   ├── layout.tsx        # marketing chrome
│   ├── page.tsx          # /
│   ├── about/page.tsx    # /about
│   └── pricing/page.tsx  # /pricing
└── (app)/
    ├── layout.tsx        # app chrome (sidebar + nav)
    ├── dashboard/page.tsx # /dashboard
    └── settings/page.tsx  # /settings

Marketing layout vs app layout·tsx

// app/(marketing)/layout.tsx
export default function MarketingLayout({ children }: { children: React.ReactNode }) {
  return (
    <div>
      <MarketingNav />
      {children}
      <MarketingFooter />
    </div>
  );
}

// app/(app)/layout.tsx
export default function AppLayout({ children }: { children: React.ReactNode }) {
  return (
    <div className="flex h-screen">
      <AppSidebar />
      <main className="flex-1 overflow-auto">{children}</main>
    </div>
  );
}

The problem

The convention

What you can do with them

Code

External links

Exercise

Progress

Comments 0