Next.jsで[[...slug]]を使ったオプショナルキャッチオールルートの完全ガイド！初心者でもわかるNext.jsルーティング

1. Next.jsのキャッチオールルートとは？

1. Next.jsのキャッチオールルートとは？

Next.jsでは、通常のページはファイル名とURLが1対1で対応します。しかし、複数のパスを1つのページでまとめて処理したい場合があります。例えば、ブログの投稿ページが複数ある場合、個別にファイルを作るのは大変です。そこでキャッチオールルートを使うと、すべてのURLを1つのファイルで受け取れます。

通常のキャッチオールは[...slug].jsで書きますが、オプショナルキャッチオールは[[...slug]].jsです。オプショナルの場合、URLが空のときもページを表示できます。

2. [[...slug]]の基本的な使い方

2. [[...slug]]の基本的な使い方

まずは簡単な例を見てみましょう。

import { useRouter } from "next/router";

export default function Page() {
  const router = useRouter();
  const { slug } = router.query;

  return (
    <div>
      <h1>オプショナルキャッチオールページ</h1>
      <p>slugの値: {slug ? slug.join("/") : "なし"}</p>
    </div>
  );
}

3. URLが空でも動作するオプショナルキャッチオール

3. URLが空でも動作するオプショナルキャッチオール

普通のキャッチオール([…slug])はURLが必ず存在する必要がありますが、オプショナル([[...slug]])はURLが空でもページを表示できます。例えばトップページでも同じコンポーネントを使うことができます。

import { useRouter } from "next/router";

export default function OptionalPage() {
  const router = useRouter();
  const { slug } = router.query;

  return (
    <div>
      <h1>トップまたは任意のパスに対応</h1>
      <p>{slug ? `URLパス: ${slug.join("/")}` : "トップページです"}</p>
    </div>
  );
}

4. 実際のブログページで使う例

4. 実際のブログページで使う例

例えばブログの投稿ページをまとめて1つのコンポーネントで管理したい場合、次のように書けます。

import { useRouter } from "next/router";

export default function BlogPage() {
  const router = useRouter();
  const { slug } = router.query;

  if (!slug) {
    return <h1>ブログトップページ</h1>;
  }

  return (
    <div>
      <h1>ブログ記事: {slug.join("/")}</h1>
      <p>ここに記事の内容を表示できます。</p>
    </div>
  );
}

5. ネストされたパスにも対応可能

5. ネストされたパスにも対応可能

キャッチオールルートは階層が深いURLでも対応できます。URLが /products/electronics/phone のように複数階層でも、slug配列としてまとめて取得できます。

import { useRouter } from "next/router";

export default function ProductPage() {
  const router = useRouter();
  const { slug } = router.query;

  return (
    <div>
      <h1>商品ページ</h1>
      <p>{slug ? `カテゴリー: ${slug.join(" > ")}` : "全商品一覧"}</p>
    </div>
  );
}

6. getStaticPathsと組み合わせる方法

6. getStaticPathsと組み合わせる方法

静的生成（Static Generation）を使う場合、オプショナルキャッチオールルートはgetStaticPathsと組み合わせることができます。

export async function getStaticPaths() {
  return {
    paths: [
      { params: { slug: ["blog","2026","02","15"] } },
      { params: { slug: ["blog","2026","02","16"] } }
    ],
    fallback: true
  };
}

export async function getStaticProps({ params }) {
  return { props: { slug: params.slug || null } };
}

7. まとめて使うと便利なポイント

7. まとめて使うと便利なポイント

オプショナルキャッチオールルート([[...slug]])は、複雑なURL構造を1つのページで管理できるため、ブログやECサイトなどで非常に便利です。URLが空の場合も対応できるので、トップページやカテゴリー一覧なども同じコンポーネントで扱えます。さらにgetStaticPathsやgetStaticPropsと組み合わせると、静的生成と動的ルーティングの両方に対応可能です。

まとめ

まとめ

本記事ではNext.jsにおけるオプショナルキャッチオールルート([[...slug]])の使い方について、初心者でも理解しやすい形で解説しました。Next.jsでは通常のページはURLとファイルが一対一で対応していますが、ブログ記事や商品ページ、複雑な階層構造のサイトでは同じコンポーネントで複数のURLをまとめて処理したい場面があります。そこでオプショナルキャッチオールルート([[...slug]])を使うことで、URLが存在しない場合でも安全にページを表示でき、トップページやカテゴリー一覧なども統一したコードで管理することが可能です。

基本的な使い方として、useRouterフックを使いrouter.query.slugで配列としてURLパスを取得する方法を紹介しました。URLが存在する場合は配列に格納され、存在しない場合はundefinedとなるため、条件分岐で「なし」や「トップページです」といった表示を簡単に制御できます。これによりユーザーがどのURLにアクセスしても、同じコンポーネント内で柔軟に対応できるのが大きな利点です。

またネストされたURL構造にも対応可能で、URLが複数階層の場合でもslug.join("/")やslug.join(" > ")を用いることで、画面上に見やすい形式で表示できます。例えばECサイトのカテゴリーページやブログ記事の詳細ページなど、URLの階層構造が複雑な場合でも1つのコンポーネントで全て管理できるため、保守性や再利用性が格段に向上します。

静的生成（Static Generation）を利用する場合には、getStaticPathsと組み合わせることで、事前に特定の記事やページのみを生成することも可能です。fallback: trueを設定することで、未指定のパスにアクセスした場合でも動的に生成されるため、ユーザー体験を損なわずにページを提供できます。さらにgetStaticPropsでparams.slugを取得すれば、サーバーサイドで必要なデータを柔軟に渡すこともできます。

実際のプロジェクトでの利便性として、ブログサイト、ECサイト、ポートフォリオサイトなど、多階層で動的なルーティングが必要なケースに非常に適しています。コードの簡素化だけでなく、URL構造の変更やページ追加にも容易に対応でき、開発効率の向上にもつながります。これにより、Next.jsでの柔軟なルーティング設計が実現できます。

さらに、Reactコンポーネントの書き方も統一することで、開発者が読みやすく保守しやすいコードベースを構築できます。オプショナルキャッチオールルートを活用することで、トップページ、カテゴリーページ、詳細ページなど異なるページタイプを一つのコンポーネントで管理し、条件分岐で内容を切り替えることができます。これによりコードの重複を減らし、バグの発生率も抑えられます。

サンプルとしては以下のように簡単にオプショナルキャッチオールを利用したコンポーネントを作成できます。

import { useRouter } from "next/router";

export default function OptionalCatchAll() {
  const router = useRouter();
  const { slug } = router.query;

  return (
    <div>
      <h1>オプショナルキャッチオールデモ</h1>
      <p>{slug ? `アクセスされたパス: ${slug.join("/")}` : "トップページです"}</p>
    </div>
  );
}