Route Groups and Parallel Routes

10 min read

Route Groups: Organise Without Affecting URLs

Wrapping a folder name in parentheses — (auth), (marketing) — creates a route group. The group name is ignored by the router, so routes inside keep clean URLs. The primary use case is sharing a layout.tsx among a set of routes without adding a URL prefix.

text

src/app/
  (marketing)/
    layout.tsx       <- shared marketing layout
    page.tsx         -> /
    about/
      page.tsx       -> /about
  (app)/
    layout.tsx       <- shared app shell
    dashboard/
      page.tsx       -> /dashboard
    settings/
      page.tsx       -> /settings

Parallel Routes with Named Slots

Parallel routes let you render multiple independent pages inside the same layout simultaneously. Define a slot by naming a folder with an @ prefix. The layout receives each slot as a prop and can render them side by side — perfect for dashboards with independent panels, or modal intercepts.

tsx

// src/app/feed/layout.tsx
import type { ReactNode } from "react";

export default function FeedLayout({
  children,
  sidebar,
}: {
  children: ReactNode;
  sidebar: ReactNode;
}) {
  return (
    <div className="grid grid-cols-[1fr_320px] gap-8">
      <div>{children}</div>
      <aside>{sidebar}</aside>
    </div>
  );
}

// src/app/feed/@sidebar/page.tsx — the slot's page
export default function Sidebar() {
  return <p>Trending topics go here.</p>;
}

Parallel route slots (@folder) are not segments in the URL. They are invisible to the router and only affect how the layout receives and renders content.

Ready to test yourself?

Practice Next.js— quiz & coding exercises