Route groups and private folders

Sometimes a folder is only there for order and should not appear in the address. For that there is a route group — a folder whose name is in parentheses, such as (site). Next.js skips such a name when building the address.

A group for order

Let us move the About page into a group:

app/
├── (site)/
│   └── about/
│       └── page.tsx      /about
└── posts/
    └── page.tsx          /posts

The page still opens at /about, not /site/about. The page.tsx file itself does not change.

A layout for a group

The main benefit of groups is different layouts for different parts of the site without changing addresses. Say the login and registration pages have no blog menu. Put them in an (auth) group with its own layout:

// app/(auth)/layout.tsx
export default function AuthLayout({ children }: { children: React.ReactNode }) {
  return <div className="auth-box">{children}</div>;
}

// app/(auth)/login/page.tsx
export default function LoginPage() {
  return <h1>Log in</h1>;
}

The /login address opens the login page inside the auth-box block. The (auth)/layout.tsx layout applies only to the pages of that group.

The whole picture

app/
├── layout.tsx              root layout — for everything
├── (site)/
│   ├── layout.tsx          blog menu
│   ├── page.tsx            /
│   └── about/page.tsx      /about
└── (auth)/
    ├── layout.tsx          a plain frame
    ├── login/page.tsx      /login
    └── register/page.tsx   /register

The root app/layout.tsx still wraps everything; group layouts nest inside it.

Private folders

A folder whose name starts with an underscore, such as _components, is excluded from routing entirely. It is a handy place for components only one section needs:

// app/posts/_components/PostCard.tsx
export default function PostCard({ title }: { title: string }) {
  return <h2>{title}</h2>;
}

Import it into a page as usual: import PostCard from './_components/PostCard'. Even a page.tsx placed in such a folder creates no address.

Summary

Common mistake

Creating pages with the same address in two groups, such as app/(site)/about/page.tsx and app/(auth)/about/page.tsx. Both give /about, and Next.js stops the build with an error about two pages resolving to one path. Group names are not part of the address — make sure addresses inside groups do not repeat.