Next.js Route Groups: Invisible Folders for Routes

WHY IT EXISTS As a Next.js application grows, you need a way to organize related routes and apply shared UI to them. Route Groups solve this by letting you structure your file system for clarity without forcing that structure into your public-facing URLs.

THE MENTAL MODEL A Route Group is an "invisible folder" in your app directory. By wrapping a folder's name in parentheses, like (marketing), you tell Next.js to use it for file organization and layout nesting, but to completely ignore it when constructing the URL path.

HOW IT WORKS You create a directory with a name enclosed in parentheses, for example, app/(auth)/login/page.tsx. Next.js's router will serve this page at the /login path, omitting the (auth) segment. You can then place a layout.tsx file inside the (auth) folder to wrap all routes within that group with a shared UI, like an authentication form container.

WHEN TO USE IT Use Route Groups for three main reasons. First, to organize your project files into logical sections like (marketing), (app), or (legal). Second, to apply a specific layout to a subset of your routes. Third, to create multiple, mutually exclusive root layouts, effectively partitioning your app into distinct experiences.

WHEN NOT TO USE IT Do not use a Route Group when you want the folder name to be part of the URL. For a section of your site like /blog or /products, you should use a standard folder named blog or products, not (blog) or (products). The parentheses are specifically for opting-out of the URL path.

ONE CANONICAL EXAMPLE To give marketing pages a different look from your main application, you can create two groups. app/(marketing)/layout.tsx would contain your public-facing header and footer. Pages like app/(marketing)/about/page.tsx would use this layout and be available at /about. Separately, app/(dashboard)/layout.tsx could have a user-specific sidebar, applying to pages like app/(dashboard)/settings/page.tsx, which resolves to /settings.