#Route Groups & Parallel Routes¶

Route Groups — Folders Without URLs¶

Wrap a folder name in parentheses: (name). The folder organizes files but does not appear in the URL.

app/
  (marketing)/
    layout.tsx           ← marketing-specific layout
    page.tsx             →  /
    pricing/page.tsx     →  /pricing
    blog/page.tsx        →  /blog
  (app)/
    layout.tsx           ← authed layout, separate chrome
    dashboard/page.tsx   →  /dashboard
    settings/page.tsx    →  /settings

Use cases:

1Multiple root layouts. Marketing pages vs. authed app — different chrome, different fonts, different metadata.
2Co-locate by feature. Group (checkout)/cart, (checkout)/payment, (checkout)/confirm.
3Apply different middleware. Combined with matcher rules in middleware.ts.

Multiple Root Layouts¶

Place layout.tsx directly inside each group and remove the global app/layout.tsx from a top-level role:

tsx

15 lines

1// app/(marketing)/layout.tsx
2import "./globals.css";
3export default function MarketingLayout({ children }: { children: React.ReactNode }) {
4  return (
5    <html lang="en"><body className="font-sans">{children}</body></html>
6  );
7}
8
9// app/(app)/layout.tsx
10import "./globals.css";
11export default function AppLayout({ children }: { children: React.ReactNode }) {
12  return (
13    <html lang="en" className="dark"><body className="font-mono bg-gray-950 text-gray-50">{children}</body></html>
14  );
15}

Each root layout must render <html> and <body> — they are independent.

Parallel Routes — Multiple Pages in One Layout¶

Parallel routes let one layout render multiple slots that navigate independently.

Folder Convention¶

@ prefixes a parallel slot. The layout receives it as a prop.

app/dashboard/
  layout.tsx
  page.tsx
  @analytics/page.tsx
  @team/page.tsx

tsx

18 lines

1// app/dashboard/layout.tsx
2export default function DashboardLayout({
3  children,
4  analytics,
5  team,
6}: {
7  children: React.ReactNode;
8  analytics: React.ReactNode;
9  team: React.ReactNode;
10}) {
11  return (
12    <div className="grid grid-cols-3 gap-4">
13      <section>{children}</section>
14      <section>{analytics}</section>
15      <section>{team}</section>
16    </div>
17  );
18}

Why It's Powerful¶

Each slot can have its own loading.tsx and error.tsx.
The URL stays the same — /dashboard — while slots can be navigated independently.
Combine with intercepting routes to build modals.

Default & Conditional Slots¶

If a slot has no matching segment for a URL, Next renders its default.tsx (or null if absent):

tsx

4 lines

1// app/dashboard/@analytics/default.tsx
2export default function Default() {
3  return null;   // no analytics for this URL
4}

Conditional Rendering by User Role¶

tsx

9 lines

1export default async function DashboardLayout({ children, admin, user }) {
2  const me = await getSession();
3  return (
4    <>
5      {children}
6      {me?.role === "ADMIN" ? admin : user}
7    </>
8  );
9}

The unused slot isn't fetched — Next code-splits per slot.

Common Mistakes¶

Forgetting default.tsx → the slot 404s on direct URL visits.
Using parallel routes when a regular nested layout would do — adds complexity for no benefit.
Confusing route groups (name) with parallel routes @name — the first is organizational; the second renders multiple pages.