Route Groups (...)

Organizing folders and layouts without changing URLs.

Next.js4 min readConcept 17 of 65

The invisible folders

In the App Router, every folder you create normally becomes a segment in the URL.

But sometimes you just want to organize your code visually, or group files together. If you wrap a folder name in parentheses—like (marketing) or (shop)—Next.js treats it as a **Route Group**. The folder becomes completely invisible to the URL.

Multiple layouts

The most powerful feature of Route Groups is layout scoping.

If you want your /about page to have a clean, marketing-focused layout, but your /dashboard page to have a complex sidebar layout, you can create app/(marketing)/layout.tsx and app/(app)/layout.tsx. Both layouts exist at the root URL level, but they only apply to the routes inside their respective groups.

Stripping the path

If you create the file app/(marketing)/about/page.tsx, the resulting URL is simply /about.

If you create app/(shop)/checkout/page.tsx, the URL is /checkout. The grouping folders are entirely stripped away during routing.

The Invisible Folder

Watch the auto-demo strip the parenthesis folders away. Notice how (marketing) and (shop) both contribute to the same root URL level, while maintaining their own isolated layouts.

App Router Build Process

app/
(marketing)/
layout.tsx
about/
page.tsx
(shop)/
layout.tsx
cart/
page.tsx
Generated URL/about
Uses (marketing) layout
Generated URL/cart
Uses (shop) layout

Folders wrapped in parentheses—like (marketing)—are completely stripped from the final URL path by the Next.js router. They act as "invisible" folders that allow you to group related routes and apply specific layout.tsx files without forcing the user to visit /marketing/about.

Check yourself

Pick an answer to lock it in, then read why. Getting one wrong is part of how it sticks.

  1. 1If you create a file at app/(admin)/settings/security/page.tsx, what is the correct URL to access this page?
  2. 2What is the primary architectural use-case for Route Groups in Next.js?

Remember this

  • Wrap a folder in parentheses (folderName) to create a Route Group.
  • Route Groups are completely ignored by the Next.js router when building the URL.
  • They are primarily used to organize code and scope layouts to specific sets of pages.
  • You can use Route Groups to create multiple distinct Root Layouts.

Done with this concept?

Mark it complete to track your progress. No login needed.