Route Groups

A folder like (shop) is a route group: it organises files and can have its own layout, but its name is not part of the URL.

app/
├── (shop)/
│   ├── layout.tsx             Navbar + Footer
│   ├── page.tsx               /
│   ├── products/page.tsx      /products
│   └── cart/page.tsx          /cart
├── (auth)/
│   ├── layout.tsx             centred card, no navbar
│   ├── login/page.tsx         /login
│   └── register/page.tsx      /register
└── layout.tsx                 <html><body> only

• Different layouts at the same URL level: the shop has a navbar; login and register pages do not.
• Team organisation: (marketing), (shop), (admin) folders owned by different teams.
• Multiple root layouts: if there is no app/layout.tsx, each group can have its own layout with <html>. Navigating between them does a full page load.

app/(auth)/layout.tsx

export default function AuthLayout({ children }: { children: React.ReactNode }) {
  return (
    <div className="min-h-screen grid place-items-center bg-gray-50">
      <div className="w-full max-w-sm rounded-xl bg-white p-8 shadow">{children}</div>
    </div>
  );
}