Next.js › Routing (App/Pages Router)

How would you organize routes for a large application using route groups to keep related sections logically separated without affecting the URL?

Advanced

Answer

You wrap folder names in parentheses, such as (marketing) or (dashboard), to create route groups that let you apply different layouts or organize files for related sections of your application, while parentheses in folder names are completely ignored when building the actual visible URL path.

// app/(marketing)/about/page.js is accessible at /about
// app/(dashboard)/settings/page.js is accessible at /settings
// Each group can have its own layout.js

Real-world example A large SaaS application organizes its public marketing pages and its authenticated dashboard pages into separate route groups, each with its own distinct layout, while keeping the actual URLs clean and simple.

Common follow-ups: Can you have multiple root layouts using different route groups?;Do route groups affect how code splitting works across the application?

Layouts & Templates;Next.js Project Setup & Configuration