What are route groups and parallel routes in Next.js

Route Groups

Wrap a folder name in parentheses to create a route group. The folder is excluded from the URL. Route groups let you apply different layouts to different sections without affecting URLs.

app/
  (marketing)/
    layout.tsx    ← Marketing layout (no sidebar)
    page.tsx      → /
    about/
      page.tsx    → /about
  (dashboard)/
    layout.tsx    ← Dashboard layout (with sidebar)
    settings/
      page.tsx    → /settings
    analytics/
      page.tsx    → /analytics

Both sections share the root layout but have their own intermediate layout. The parentheses folders do not appear in the URL at all.

Parallel Routes

Parallel routes let you render multiple pages simultaneously in the same layout using @slot folders:

app/
  layout.tsx
  @sidebar/
    page.tsx
  @main/
    page.tsx

// app/layout.tsx
export default function Layout({
  sidebar,
  main,
}: {
  sidebar: React.ReactNode
  main: React.ReactNode
}) {
  return (
    <div className="flex">
      {sidebar}
      {main}
    </div>
  )
}

Each slot can have its own loading and error states. This is ideal for dashboards with independent data panels. Each slot navigates independently, so one panel refreshing doesn't affect another.