Next.js › Layouts & Templates

How would you create a layout that only applies to a specific group of routes without affecting the URL structure?

Intermediate

Answer

You use a route group, created by wrapping a folder name in parentheses, such as (marketing), which lets you organize routes and apply a shared layout to them without that folder name appearing anywhere in the actual URL path.

// app/(marketing)/layout.js applies to routes below
// app/(marketing)/about/page.js is accessible at /about, not /marketing/about
export default function MarketingLayout({ children }) {
  return <div className="marketing-theme">{children}</div>;
}

Real-world example A company applies a distinct marketing themed layout to its about and pricing pages using a route group, while keeping the URLs clean at /about and /pricing rather than /marketing/about.

Common follow-ups: What other purposes do route groups serve besides organizing layouts?;Can you have multiple root layouts using route groups?

Routing (App/Pages Router);Metadata API & SEO Optimization