「Next.js の (dashboard) は何者？URLに出ないフォルダの正体と活用法」

🟢 はじめに

Next.js の app ディレクトリ構成を見ていると、たまにこんなパスに出会います：

app/(dashboard)/dashboard/ask/page.tsx

「(dashboard)って何？ルートパスになるの？」「どうしてカッコがついてるの？」
私も最初はまったくわかりませんでした。

実はこれは、**Next.js App Router の「グループルート」**という機能で、URLに出てこないディレクトリ構造の整理方法なんです。

この記事では、初心者向けに「グループルートとはなにか」「どう使うのか」「layout.tsxとの関係」について、わかりやすく解説していきます。

📦 グループルート（Group Routes）とは？

• (dashboard) のように 丸括弧で囲まれたフォルダ名

• URLには影響しない（表示されない）

• 目的：ディレクトリ構造を整理したり、レイアウトを共有するため

✅ 具体例

app/
├── (dashboard)/
│   └── dashboard/
│       └── ask/
│           └── page.tsx

この場合の実際のアクセスパスは：

/dashboard/ask

(dashboard) はURLにまったく現れません。開発者だけがその存在を知っていればOKな「内部的なグルーピング」です。

🧩 なぜ使うの？

1. レイアウトをグループ単位で共有できる

2. ファイル構造を視覚的に整理できる

3. 大規模プロジェクトでの可読性・保守性が上がる

🖼️ layout.tsx と組み合わせるとどうなる？

app/(dashboard)/layout.tsx を作成すると、グループ配下すべてのページに共通のレイアウトを適用できます。

例：app/(dashboard)/layout.tsx

export default function DashboardLayout({ children }: { children: React.ReactNode }) {
  return (
    <div className="min-h-screen flex flex-col">
      <header className="p-4 bg-green-600 text-white">ダッシュボード共通ヘッダー</header>
      <main className="flex-1 p-6">{children}</main>
    </div>
  );
}

適用されるページ例

• /dashboard

• /dashboard/ask

• /dashboard/answer

• /dashboard/history

など、(dashboard) 配下のすべてのページに共通のヘッダー・レイアウトを持たせることができます。

🧑‍💻 開発者視点でのメリット（グループルートと layout.tsx の活用）

Next.js のグループルート（例：(dashboard)）は、見た目には URL に影響を与えない仕組みですが、開発者にとっては非常に大きな恩恵があります。ここでは、そのメリットを初心者にもわかりやすく説明します。

① プロジェクト構造がすっきり整理できる

グループルートを使うことで、URLとは関係ない単位でページを整理できます。たとえば「ダッシュボード関連のページ」「管理画面関連のページ」「ユーザー関連のページ」などを、それぞれ (dashboard) や (admin) のようにグループ化できます。

これにより、フォルダ構成が機能別にまとまり、プロジェクトが大きくなっても見通しが良く、管理しやすくなるのです。

② グループ単位で共通のレイアウトを適用できる

(dashboard) グループ内に layout.tsx を設置すれば、そのグループ配下すべてのページに共通のヘッダーやサイドバーを表示できます。たとえば、ダッシュボードにだけ表示させたいナビゲーションをグループ内レイアウトに含めておくことで、不要なレイアウトの重複を防げます。

これにより、開発効率が上がるだけでなく、変更が必要になったときも一箇所を直すだけで済むというメンテナンス性の高さが得られます。

③ 名前の付け方が自由で柔軟

グループルートは (dashboard) のように () で囲まれていれば、名前は自由につけられます。これは、URL構造に縛られずに設計できるという点で非常に便利です。

たとえば、(marketing) や (auth)、(settings) のように、内部の役割ごとにディレクトリを分けておけば、複数人で開発していても、どこに何があるかすぐに分かる構造になります。

④ URL構造に影響しないので安心して再構成できる

グループルートはルーティングに影響を与えないため、何度でも構成を変えてもURLが変わらないというのも大きなメリットです。たとえば、プロジェクトが成長する中で「この機能はグループを分けた方がいいな」と思ったときにも、安心して移動できます。

これは、URLの変更によるバグやSEO影響を気にせずに、柔軟に構造を進化させられるという意味で非常に価値の高い特性です。

🎯 まとめ

Next.js の (dashboard) のようなグループルートは、
URL設計とは無関係にファイル構造を整理できるパワフルな仕組みです。

初心者のうちは気づかないことも多いですが、使いこなせるようになると大規模開発やレイアウト管理が一気に楽になります。

ぜひ、layout.tsxと一緒に活用して、見通しのよいプロジェクト構成にしてみてください！

✍️ おまけ：覚えておくべきポイント

• () で囲まれたフォルダ名 → ルーティングには出ない

• layout.tsx はそのグループの中だけに影響する

• 名前は (dashboard), (auth), (settings) など何でもOK

• グループルートを使うと複雑なUI構造もきれいに保てる