NextJSにおけるルートのグループ化

時に、便宜上、複数のルートを1つのフォルダにグループ化したい場合があります。その際、グループ化するフォルダがURLに別のセグメントを作成しないようにする必要があります。

そのためには、グループ化するフォルダ名を丸括弧で囲みます。 例を見てみましょう。

URL /regでは登録を行い、URL /logでは認証を行いたいとします。 これらのURLに対応するフォルダを、名前が(auth)の共通フォルダにまとめます。

これにより、以下のようなファイル構造が得られます：

• /app//(auth)//reg/page.jsx/log/page.jsx

登録ページのファイルを作成します：

app/(auth)/reg/page.jsxexport default function Reg() {
  return <h1>登録</h1>;
}

認証ページのファイルを作成します：

app/(auth)/log/page.jsxexport default function Log() {
  return <h1>ログイン</h1>;
}