Next.js Route Groups

Large applications grow many folders. Marketing pages, shop pages, account pages, and admin pages quickly fill the app directory. Route groups let you organize those folders without changing a single URL. A route group is a folder name wrapped in parentheses, such as (marketing). Next.js ignores the parentheses when it builds the web address.

The Everyday View

Imagine a storage room with labeled boxes. One box says "Kitchen," another says "Garage," and a third says "Books." The labels help you find items quickly. Visitors never see the labels. They see only the items inside.

Route groups work like those labels. The folder name helps developers stay organized, and the visitor sees only the final URL.

A Basic Example

The diagram below shows how folders map to URLs when route groups are in use.

app/
  page.js                      -> /
  (marketing)/
    about/
      page.js                  -> /about
    pricing/
      page.js                  -> /pricing
  (shop)/
    products/
      page.js                  -> /products
    cart/
      page.js                  -> /cart

The names (marketing) and (shop) never appear in the browser address bar. A visitor opens /about, not /marketing/about.

Separate Layouts for Each Group

Route groups shine when different sections need different page frames. A marketing section might show a simple header and a large footer. A shop section might show a header with a cart icon and a sidebar with filters.

Place a layout.js file inside each group folder. Pages inside the group receive that layout automatically.

app/
  (marketing)/
    layout.js        header + big footer
    about/page.js
  (shop)/
    layout.js        header + cart + filter sidebar
    products/page.js

Marketing Layout Code

export default function MarketingLayout({ children }) {
  return (
    <div>
      <header>Brand Name</header>
      <main>{children}</main>
      <footer>Contact, Terms, Privacy</footer>
    </div>
  );
}

Shop Layout Code

export default function ShopLayout({ children }) {
  return (
    <div>
      <header>Brand Name | Cart (0)</header>
      <aside>Filters</aside>
      <main>{children}</main>
    </div>
  );
}

Multiple Root Layouts

Every Next.js app needs a root layout that contains the html and body tags. Route groups allow more than one root layout. Delete the top-level app/layout.js file and place a full layout inside each group.

app/
  (public)/
    layout.js        html + body for public site
    page.js          -> /
  (dashboard)/
    layout.js        html + body for dashboard
    overview/page.js -> /overview

Moving between two different root layouts triggers a full page load. Navigation inside the same root layout stays fast and smooth.

Grouping Without Layouts

A route group does not require a layout file. Many teams group folders purely for tidiness. A (auth) group can hold login, signup, and reset-password folders. The group keeps related screens side by side in the editor sidebar.

Applying Loading Screens to a Subset

Special files like loading.js apply to every route beside them. A route group lets you attach a loading screen to only some pages in a folder.

app/
  dashboard/
    (with-loading)/
      loading.js
      reports/page.js
    settings/page.js

In this layout, the reports page shows the loading screen. The settings page does not.

Rules to Remember

• Two groups cannot define the same URL. If (marketing)/about/page.js and (shop)/about/page.js both exist, the build fails with a conflict error.
• Parentheses only work on folder names. They have no effect on file names.
• Group names carry no meaning for Next.js. Pick names that make sense to your team.
• Groups can nest inside other groups when the project needs more structure.

Common Mistakes

Expecting the Name in the URL

Beginners sometimes visit /marketing/about and see a not-found page. The parentheses remove the folder name from the path, so the correct URL is /about.

Creating Duplicate Paths

Two folders in different groups that resolve to the same URL cause build errors. Review the final URL list before you add a new page.

Forgetting the Root Layout Rules

If you remove the top-level layout, every group needs its own layout with html and body tags. A missing tag produces runtime errors.

Quick Summary

Route groups give you free organization, separate layouts, and flexible loading screens. The parentheses stay invisible to visitors, so URLs remain clean while the project structure stays easy to navigate.