What are route groups in Next.js and how do you use them?

Q: What are route groups in Next.js and how do you use them?

**Target Audience:** Frontend engineers preparing for Next.js interviews — assumes basic React and App Router familiarity. **Difficulty:** Medium > **How to read this doc:** Each idea is explained in plain language first, then tagged with `📌 Interview term:`. Every behaviour claim was checked against the Next.js 16.4.2 docs shipped with the package and, in the **Verified** section, against real output from a build, a running server or a real browser. ## 1. Why This Even Matters — A Story First A department store has a shoe section, a kitchen section and a customer service desk. The signs on the doors (the URLs) just say "Shoes" and "Kitchen". Behind the scenes, though, each section has its own staff room, its own decorations and its own manager. Nobody expects the street address to change to "Store / Section B / Shoes" because of how the store is organized internally. A **route group** is a staff-only label on a folder. It lets you give a set of pages their own decorations (a layo

The problem

Question presented to candidate: "Our marketing pages, the logged-in app and the auth screens all need different chrome, but we do not want /marketing/ or /app/ in the URLs. How would you structure the app directory?"

What a strong answer should cover:

A folder in parentheses, such as (marketing), is a route group: it is left out of the URL, so app/(marketing)/about/page.tsx serves /about.
Groups let a set of routes share a layout (and loading or error files) while other routes at the same URL level opt out.
Groups are also for organization: by team, feature or concern, without affecting routing.
Several root layouts are possible by putting html and body in each group layout instead of app/layout.tsx; navigating between different root layouts is a full page load.
Two groups must not resolve to the same URL, such as (a)/about and (b)/about; the build fails.
Leaving a group unmounts its layout, so its client state resets when you come back.

Clarifying questions expected:

"Do the sections share the same html, fonts and providers?" — decides between one root layout and several.
"How often do users move between the sections?" — with several root layouts, each crossing reloads the page.

Code / implementation expected: Yes — (site), (auth) and (admin) groups with their own layouts under one root layout.

nextjs
route-groups
routing
app-router

Try it yourself

Sketch your approach before you read the solution. That is what the interview tests.

Stuck? Get a hint.

A short nudge toward the approach. It will not give the answer away.

Solution

Target Audience: Frontend engineers preparing for Next.js interviews — assumes basic React and App Router familiarity. Difficulty: Medium

How to read this doc: Each idea is explained in plain language first, then tagged with 📌 Interview term:. Every behaviour claim was checked against the Next.js 16.4.2 docs shipped with the package and, in the Verified section, against real output from a build, a running server or a real browser.

1. Why This Even Matters — A Story First

A department store has a shoe section, a kitchen section and a customer service desk. The signs on the doors (the URLs) just say "Shoes" and "Kitchen". Behind the scenes, though, each section has its own staff room, its own decorations and its own manager. Nobody expects the street address to change to "Store / Section B / Shoes" because of how the store is organized internally.

A **route grou

The solution is hidden so you can try first

8 min read · 8 sections

Read the code

Three groups under one root layout

// app/layout.tsx
// One root layout: html and body live here, so every group shares one document.
export default function RootLayout({ children }: { children: React.ReactNode }) {
  return <html lang="en"><body>{children}</body></html>;
}

// app/(site)/layout.tsx
import Link from "next/link";

// Only routes inside (site) get the marketing header. The folder name is not in the URL.
export default function SiteLayout({ children }: { children: React.ReactNode }) {
  return (
    <>
      <header>
        <Link href="/about">About</Link> <Link href="/pricing">Pricing</Link> <Link href="/login">Log in</Link>
      </header>
      <main>{children}</main>
    </>
  );
}

// app/(auth)/layout.tsx
// Login and signup opt out of the marketing header and get a centred card instead.
export default function AuthLayout({ children }: { children: React.ReactNode }) {
  return <div className="auth-card">{children}</div>;
}

// app/(admin)/layout.tsx
// A group is also a home for segment files: the loading.tsx next to this layout
// applies to every route inside (admin), and "(admin)" never appears in the URL.
export default function AdminLayout({ children }: { children: React.ReactNode }) {
  return <div className="admin-shell">{children}</div>;
}

// app/(admin)/loading.tsx
export default function AdminLoading() {
  return <p>Loading admin...</p>;
}

// app/(site)/about/page.tsx
export default function About() { return <h1>About</h1>; }   // URL: /about

// app/(auth)/login/page.tsx
export default function Login() { return <h1>Log in</h1>; }    // URL: /login

Discussion

Other approaches, follow-ups and how it went in real interviews.

Sign in to join the discussion.

No comments yet. Share how you would answer it.

The solution is hidden so you can try first

Keep your momentum going.