Next.jsのCatch-all Routes完全解説！初心者でもわかる[...slug]キャッチオールルーティング入門

1. Next.jsでCatch-all Routesとは何か

1. Next.jsでCatch-all Routesとは何か

Next.jsのCatch-all Routesとは、複数のURLパスをひとつのファイルでまとめて処理できるルーティング機能です。 ルーティングとは、URLに応じて表示するページを切り替える仕組みのことです。

例えば、ブログサイトで考えてみましょう。 blog travel japan や blog tech javascript など、カテゴリや記事によってURLがどんどん増えていきます。 このような場合に、毎回ファイルを作るのは大変です。

そこで登場するのが [...slug] です。 これはキャッチオールルートと呼ばれ、どんな階層のURLでもまとめて受け取ることができます。

2. [...slug]の基本的なフォルダ構成

2. [...slug]の基本的なフォルダ構成

Next.jsでは、appフォルダまたはpagesフォルダの中に特別な名前のフォルダを作ることでルーティングを設定します。

キャッチオールを使う場合は、次のようにフォルダを作ります。

app/blog/[...slug]/page.jsx

export default function BlogPage({ params }) {
  return (
    <div>
      <h1>ブログページ</h1>
      <p>パラメータ: {params.slug.join(" / ")}</p>
    </div>
  );
}

この場合、blogのあとに続くすべてのURLを受け取ることができます。 例えば blog/a や blog/a/b/c などです。

3. slugとは何かをやさしく理解しよう

3. slugとは何かをやさしく理解しよう

slugとは、URLの一部を表す文字列のことです。 例えば https example com blog travel の travel の部分がslugです。

キャッチオールの場合、slugは配列になります。 配列とは、複数の値をまとめて入れる箱のようなものです。

つまり blog a b c のようなURLでは、slugは a b c の三つが配列として渡されます。

export default function Page({ params }) {
  console.log(params.slug);

  return (
    <div>
      <h2>Slugの確認</h2>
      <p>{JSON.stringify(params.slug)}</p>
    </div>
  );
}

4. Optional Catch-all Routesとの違い

4. Optional Catch-all Routesとの違い

Next.jsにはOptional Catch-all Routesという仕組みもあります。 これは [[...slug]] と書きます。

通常の [...slug] は、少なくとも一つ以上のURLが必要です。 しかし [[...slug]] の場合は、何も指定しなくてもアクセスできます。

app/shop/[[...slug]]/page.jsx

export default function ShopPage({ params }) {
  return (
    <div>
      <h1>ショップページ</h1>
      <p>Slug: {params.slug ? params.slug.join(" / ") : "なし"}</p>
    </div>
  );
}

5. 実際の活用例 ブログサイトでの応用

5. 実際の活用例 ブログサイトでの応用

Next.jsのキャッチオールルーティングは、ブログサイトやニュースサイト、商品一覧ページなどでよく使われます。 カテゴリごと、記事ごとにURLが変わる場合でも柔軟に対応できます。

export default function BlogArticle({ params }) {
  const category = params.slug[0];
  const article = params.slug[1];

  return (
    <div>
      <h1>カテゴリ: {category}</h1>
      <p>記事: {article}</p>
    </div>
  );
}

このように、Next.jsのルーティング機能を活用すると、柔軟なWebアプリケーションを構築できます。

6. 初心者がつまずきやすいポイント

6. 初心者がつまずきやすいポイント

初心者がよく混乱するのは、slugが文字列ではなく配列である点です。 一つしか値がない場合でも配列になります。

また、URLの順番がそのまま配列の順番になります。 そのため、どの位置に何が入るのかを事前に決めておくことが重要です。

Next.jsのCatch-all Routesを理解すると、大規模なWebサイトやアプリ開発で役立ちます。 ルーティングの仕組みをしっかり理解することで、Next.jsの実力を最大限に引き出すことができます。

まとめ

まとめ

今回はNext.jsのCatch-all Routesについて、初心者にも理解しやすい形で整理しました。Next.jsはReactを基盤としたフレームワークであり、ファイルベースルーティングが大きな特徴です。その中でもCatch-all Routesは、複数階層のURLを一つのページファイルで受け取ることができる非常に強力な機能です。

特にブログサイトやニュースサイト、商品一覧ページのように、カテゴリや記事ごとにURLが増えていくWebアプリケーションでは、ルーティング設計が重要になります。Next.jsのappディレクトリやpagesディレクトリで [...slug] というフォルダ名を使うことで、可変長のURLパラメータを配列として受け取ることができます。この仕組みにより、動的ルーティングを柔軟に実装できるようになります。

slugはURLの一部を表す文字列であり、Catch-all Routesでは配列として扱われます。例えば blog tech react のようなURLでは、techとreactが配列として渡されます。この配列を利用することで、カテゴリと記事を分離したり、階層構造を解析したりすることが可能です。Next.jsのルーティングと動的ルートを正しく理解することは、Web開発においてとても重要な基礎力になります。

また、Optional Catch-all Routesである [[...slug]] を使えば、URLパラメータが存在しない場合にも対応できます。これはトップページと下層ページを同一ファイルで管理したい場合に便利です。Next.jsのキャッチオールルーティングを活用することで、コードの重複を防ぎ、保守性の高い設計を実現できます。

さらに重要なのは、配列の順番と意味を事前に設計することです。URL設計は検索エンジンにも影響を与えるため、カテゴリ構造やパス設計を明確にしておくことが大切です。Next.jsのCatch-all Routesを理解することは、SEOに強いサイト構築にもつながります。適切なURL設計、明確な階層構造、読みやすいスラッグを意識することで、ユーザーにも検索エンジンにも理解しやすいサイトになります。

最後に、実際のコード例をもう一度確認しておきましょう。Catch-all Routesでは、params.slugが配列として渡されることを前提に実装します。

export default function CatchAllSummary({ params }) {
  const segments = params.slug || [];

  return (
    <div>
      <h2>Catch-all Routes確認</h2>
      <p>階層数: {segments.length}</p>
      <ul>
        {segments.map((item, index) => (
          <li key={index}>{item}</li>
        ))}
      </ul>
    </div>
  );
}

このようにNext.jsのCatch-all Routesは、動的ルーティング、配列パラメータ処理、URL設計、ブログ構築、商品ページ管理など、さまざまな場面で活躍します。Next.js入門者にとっては少し難しく感じるかもしれませんが、基本を理解すれば非常に便利な機能です。ReactとNext.jsの基礎を押さえながら、キャッチオールルーティングを実践で使いこなしていきましょう。