CodePark/ questions / App Router & files
START PRACTICINGPRACTICE
Frontend question · Next.js › App Router & files

What are route groups and when do you use them?

app/
  (marketing)/
    layout.tsx     // marketing header
    page.tsx       // "/"
    about/page.tsx // "/about"
  (shop)/
    layout.tsx     // layout with cart
    cart/page.tsx  // "/cart"

A route group is a folder whose name is wrapped in parentheses, such as (marketing). Next.js leaves it out of the URL. So app/(marketing)/about/page.tsx serves /about.

Groups help in three ways:

  • Organize code by section or team without changing any URL.
  • Give different layouts to different sets of routes. For example, (shop) can have a layout with a cart, while (marketing) has a landing-page header.
  • Create multiple root layouts. Put a layout.tsx that renders html and body in each group.

Navigating between two different root layouts causes a full page load, not a fast client-side navigation.

Two groups must not resolve to the same URL. For example, (a)/about and (b)/about both give /about, and that is a build error.

  • A folder name in parentheses is left out of the URL.
  • Route groups organize code and let each section share its own layout.
  • Route groups make multiple root layouts possible.
  • Moving between different root layouts causes a full page load.
  • Two groups that resolve to the same path cause a build error.