Skip to main content
Practice Problems

Route groups in Next.js

What are Route Groups?

Route groups let you organize routes without affecting the URL structure. Wrap a folder name in parentheses (folderName) to create a route group β€” it won't appear in the URL path.

Basic Syntax

app/ (marketing)/ about/page.tsx β†’ /about pricing/page.tsx β†’ /pricing layout.tsx β†’ shared layout for marketing pages (dashboard)/ settings/page.tsx β†’ /settings analytics/page.tsx β†’ /analytics layout.tsx β†’ shared layout for dashboard pages layout.tsx β†’ root layout

The (marketing) and (dashboard) folders are invisible in the URL.

Use Cases

1. Different Layouts for Different Sections

tsx
// app/(marketing)/layout.tsx β€” public pages layout export default function MarketingLayout({ children }: { children: React.ReactNode }) { return ( <div> <PublicNavbar /> <main>{children}</main> <Footer /> </div> ); } // app/(dashboard)/layout.tsx β€” authenticated pages layout export default function DashboardLayout({ children }: { children: React.ReactNode }) { return ( <div> <Sidebar /> <main>{children}</main> </div> ); }

2. Organizing by Feature

app/ (auth)/ login/page.tsx β†’ /login register/page.tsx β†’ /register forgot/page.tsx β†’ /forgot (shop)/ products/page.tsx β†’ /products cart/page.tsx β†’ /cart checkout/page.tsx β†’ /checkout

3. Multiple Root Layouts

app/ (main)/ layout.tsx β†’ Root layout for main site page.tsx β†’ / about/page.tsx β†’ /about (admin)/ layout.tsx β†’ Completely different root layout for admin dashboard/page.tsx β†’ /dashboard

Each route group can have its own root layout, enabling entirely different HTML structures.

Rules

  • Route group folders use parentheses: (name)
  • The name is not part of the URL
  • You can nest route groups
  • Each group can have its own layout.tsx, loading.tsx, error.tsx
  • Be careful: two route groups should NOT produce the same URL path
// ❌ Conflict β€” both resolve to /about app/(marketing)/about/page.tsx app/(info)/about/page.tsx

Important:

Route groups organize your project structure without affecting URLs. They're essential for applying different layouts to different sections (public vs dashboard), organizing by feature, and creating multiple root layouts in the same Next.js app.

Short Answer

Interview ready
Premium

A concise answer to help you respond confidently on this topic during an interview.

Finished reading?
Practice Problems
Back
Forward