Route Groups

~18 min · route group, layout split, URL

Level 0Curious

0 XP0/68 lessons0/11 achievements

0/120 XP to next level120 XP to go0% complete

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.

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>
  );
}

External links

Route groups

Exercise

Split your project into (marketing) and (app) groups with separate layouts. Confirm the URL doesn't change and that sidebar state in (app) doesn't leak into (marketing).