Route Groups — (auth) (marketing)

Folder names in parentheses are pure organization. They do not appear in the URL but they let you scope layouts to a subset of routes.

4 min read Level 2/5 #nextjs#route-groups

What you'll learn

Use `(auth)` to group `login` and `register` without an `/auth` prefix
Apply different layouts to sibling groups
Avoid colliding paths between groups

Route groups give you organizational power without the URL noise. A folder wrapped in parentheses is treated as a grouping node — its name is not included in the URL.

A Simple Group

app/
  (auth)/
    login/page.tsx              # /login   (not /auth/login)
    register/page.tsx           # /register
  (marketing)/
    about/page.tsx              # /about

Users see clean URLs. You get a folder structure that documents intent.

Different Layouts for Different Groups

Groups shine when sibling routes need entirely different chrome. Each group can have its own layout.tsx.

// app/(auth)/layout.tsx — minimal, centered card
export default function AuthLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return <div className="auth-card">{children}</div>;
}

// app/(marketing)/layout.tsx — full marketing site nav
export default function MarketingLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <>
      <header>Marketing Nav</header>
      <main>{children}</main>
      <footer>© 2026</footer>
    </>
  );
}

/login gets the auth layout, /about gets the marketing layout, and no URL contains (auth) or (marketing).

Watch for Collisions

Because the group name is invisible, two groups cannot both define the same final URL. This will fail to build:

app/
  (marketing)/page.tsx          # /
  (app)/page.tsx                # /
  # error: both resolve to /

Pick one group to own each path. The next lesson introduces parallel routes — a way to render multiple pages side by side in one layout.

Parallel Routes — @slot →