Next.jsのCatch-all Routesとは？動的URLを一括で扱う方法を初心者向けに徹底解説

1. Next.jsのCatch-all Routesとは？

1. Next.jsのCatch-all Routesとは？

Next.jsのCatch-all Routesとは、複数のパスをまとめて受け取ることができるルーティング機能です。ルーティングとは、URLとページを結びつける仕組みのことです。たとえば、example.com/blogやexample.com/blog/reactのように、URLの後ろに文字が続く場合があります。

通常の動的ルートでは、blog/[id].jsのように一つの値だけを受け取ります。しかしCatch-all Routesを使うと、blog/react/nextjs/beginnerのように複数の階層をまとめて処理できます。これにより、ブログ記事一覧、カテゴリー、タグページなどを柔軟に作成できます。

イメージとしては、大きな箱にいろいろな形の荷物をまとめて入れるようなものです。どんな形でも一度受け取り、中身を確認してから処理します。

2. 基本の書き方とファイル構成

2. 基本の書き方とファイル構成

Next.jsでCatch-all Routesを作るには、角括弧を三つ使います。pagesフォルダの中にblogというフォルダを作り、その中に[...slug].jsというファイルを作成します。この三点リーダーが、複数の値を受け取る合図です。

import { useRouter } from "next/router";

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

  return (
    <div>
      <h1>ブログページ</h1>
      <p>取得したパラメータ: {JSON.stringify(slug)}</p>
    </div>
  );
}

ここで出てくるパラメータとは、URLの中から取り出せる値のことです。slugは配列として受け取ります。配列とは、複数のデータを順番に並べて保存できる箱のようなものです。

3. 動的URLを一括で扱うメリット

3. 動的URLを一括で扱うメリット

Catch-all Routesを使う最大のメリットは、ページを大量に作らなくてよいことです。たとえば、商品カテゴリー、地域別ページ、日付別アーカイブなど、階層が増えるサイトではファイル数が増えがちです。

しかしCatch-all Routesを使えば、一つのファイルでまとめて管理できます。条件分岐を使えば、URLの内容によって表示を変えられます。

import { useRouter } from "next/router";

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

  if (!slug) {
    return <p>読み込み中です</p>;
  }

  if (slug.length === 1) {
    return <h2>カテゴリー: {slug[0]}</h2>;
  }

  if (slug.length === 2) {
    return <h2>カテゴリー: {slug[0]} / 記事: {slug[1]}</h2>;
  }

  return <h2>それ以上の階層です</h2>;
}

このように、配列の長さを確認することで、ページの役割を分けられます。

4. Optional Catch-all Routesとの違い

4. Optional Catch-all Routesとの違い

Next.jsにはOptional Catch-all Routesという仕組みもあります。これは[[...slug]].jsのように二重の角括弧を使います。違いは、URLが空でもページを表示できる点です。

import { useRouter } from "next/router";

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

  if (!slug) {
    return <h1>トップページです</h1>;
  }

  return <h1>パス: {slug.join(" / ")}</h1>;
}

通常のCatch-all Routesは最低一つの値が必要ですが、Optionalは値がなくても動作します。用途に応じて使い分けることが重要です。

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

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

Next.jsでは静的生成という仕組みがあります。これはあらかじめHTMLを作っておく方法です。Catch-all Routesでも利用できます。

export async function getStaticPaths() {
  return {
    paths: [
      { params: { slug: ["react"] } },
      { params: { slug: ["react", "nextjs"] } }
    ],
    fallback: false
  };
}

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

export default function StaticPage({ slug }) {
  return <h1>{slug.join(" / ")}</h1>;
}

静的生成を使うと表示が高速になります。特にブログやニュースサイトで活躍します。

6. 実際の活用例と注意点

6. 実際の活用例と注意点

Catch-all Routesは、ブログ、商品詳細、カテゴリー一覧、タグ検索など幅広く使われます。動的ルーティングを理解することで、複雑なサイト構成もシンプルに作れます。

ただし注意点もあります。URLの設計を最初に決めておかないと、後から変更が大変になります。また、配列の扱いに慣れていないと混乱することがあります。

初心者の方は、まず通常の動的ルートを理解してからCatch-all Routesに進むと理解しやすいです。Next.jsのルーティングの仕組みをしっかり理解することで、柔軟で拡張性の高いWebアプリケーションを作れるようになります。

まとめ

まとめ

今回はNext.jsのCatch all Routesについて、動的URLを一括で扱う方法を基礎から丁寧に整理しました。Next.jsのルーティングはファイルベースで構成されており、pagesフォルダの構造がそのままURL構造になります。その中でもCatch all Routesは、複数階層の動的ルーティングを一つのファイルでまとめて管理できる非常に強力な仕組みです。

通常の動的ルートでは一つのパラメータしか受け取れませんが、三点リーダーを使ったCatch all Routesでは、複数のパスを配列として受け取ることができます。これにより、ブログ記事、カテゴリー、タグ、商品詳細、地域別ページなど、階層構造を持つWebアプリケーションを効率よく構築できます。特にNext.jsでブログを作成する場合や、大規模サイトでURL設計を柔軟にしたい場合に大きな効果を発揮します。

また、Optional Catch all Routesを使えば、URLが空の場合にも対応できるため、トップページと下層ページを同一ファイルで処理できます。Next.jsの動的ルーティングを深く理解することで、SEOに強い構造設計や、拡張性の高いアプリケーション設計が可能になります。URL設計はWebサイトの土台です。最初にしっかり考えることで、後の運用や機能追加が非常に楽になります。

さらに、getStaticPathsやgetStaticPropsと組み合わせることで、静的生成にも対応できます。静的生成を活用すると表示速度が向上し、ユーザー体験の向上につながります。Next.jsのCatch all Routesと静的生成を組み合わせることで、高速で構造が明確なWebサイトを実現できます。動的URL、配列パラメータ、条件分岐、静的生成といったキーワードは、Next.jsを学ぶうえで非常に重要です。

サンプルプログラムの振り返り

import { useRouter } from "next/router";

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

  if (!slug) {
    return <h2>トップページです</h2>;
  }

  return (
    <div>
      <h2>現在のパス</h2>
      <p>{slug.join(" / ")}</p>
    </div>
  );
}

このように、Next.jsのCatch all Routesは動的URLをまとめて扱うための重要な機能です。複数階層のルーティングを効率化し、ページ管理をシンプルにします。Next.js初心者の方でも、配列という考え方とURL設計を理解すれば、必ず使いこなせるようになります。動的ルーティング、Catch all Routes、Optional Catch all Routes、静的生成、getStaticPaths、getStaticPropsといった概念を組み合わせることで、柔軟で高速なWebサイトを構築できます。