Next.jsのAppRouterで使われるルートグループとは?

Next.jsのルートグループとは?

ルートグループは、Next.jsのAppRouterのURLに影響を与えずにディレクトリを整理する機能です.

どんな構成?

今Qiitaのクローンアプリを作っています。(ClaudeCodeから引用)
(public)や(auth)って書いてありますよね。これがルートグループです。

app/
├── (public)/               # 公開ページ
│   ├── layout.tsx         # ヘッダー + フッター
│   ├── page.tsx           # /
│   └── articles/
│       └── [id]/
│           └── page.tsx   # /articles/[id]
│
├── (auth)/                # 認証ページ
│   ├── layout.tsx         # シンプルなレイアウト
│   ├── login/
│   │   └── page.tsx       # /login
│   └── register/
│       └── page.tsx       # /register
│
└── (dashboard)/           # ログイン後
    ├── layout.tsx         # ダッシュボードUI
    ├── mypage/
    │   └── page.tsx       # /mypage
    └── settings/
        └── page.tsx       # /settings

実際に実装してみた

http://localhost:3000/loginで出力してみました。authはURLでは不要です。

src/app/(auth)/login/page.tsx

export default function LoginPage() {
    return <div>Login</div>
}

TopPage.tsx

import Link from 'next/link'
//省略
<Link href="/login" className="hover:text-amber-400">ログイン</Link>

こんな感じで実装してみました。他の(dashboard)なども同じように実装していけばいいと思います。