6. ルートグループ — ( ) でURLに出ないフォルダを作る

フォルダ名を丸括弧で囲むと、そのフォルダは URL に現れない「整理用のフォルダ」になります。app/(marketing)/about/page.tsx の URL は /marketing/about ではなく /about のままです。

実務では「トップや About などの宣伝ページ」と「カートなどの機能ページ」のようにページを役割でグループ分けし、グループごとに別の layout.tsx を持たせたいときに使います。URL は変えずに、適用するレイアウトだけを分けられるのがポイントです。

つまずきやすいのは、グループが違っても最終的な URL が同じになる組み合わせです。app/(a)/about/page.tsx と app/(b)/about/page.tsx はどちらも /about になり衝突してエラーになるので、グループをまたいで同じパスを作らないよう注意してください。

サンプルコード(フレームワーク環境が必要なため表示のみ)

// 丸括弧のフォルダは URL に現れない
// app/(marketing)/page.tsx        → /
// app/(marketing)/about/page.tsx  → /about
// app/(shop)/cart/page.tsx        → /cart

// app/(marketing)/layout.tsx — このグループのページだけに適用
export default function MarketingLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <div>
      <nav>宣伝ページ共通のナビ</nav>
      {children}
    </div>
  );
}

公式ドキュメントで詳しく ↗