Next.jsのDynamic Routesとは？動的URLを作る基本を初心者向けにやさしく解説

1. Next.jsのDynamic Routesとは何か

1. Next.jsのDynamic Routesとは何か

Next.jsのDynamic Routesとは、URLの一部を変数として扱い、同じ仕組みで複数のページを表示できる機能です。通常のWebページでは、aboutやcontactのように決まったURLごとにファイルを用意します。しかしブログ記事や商品詳細ページのように数が増えていくページでは、そのたびにファイルを作るのは大変です。

そこで活躍するのがDynamic Routesです。たとえばblogフォルダの中に角括弧で囲んだファイルを作ることで、URLの変化に対応できます。この角括弧の部分が動的ルートと呼ばれます。

イメージとしては、マンションの部屋番号のようなものです。建物は一つですが、部屋番号が変わることで中身が変わります。Next.jsでは、この部屋番号にあたる部分を動的に扱えるのです。

2. ファイル名で動的URLを作る基本

2. ファイル名で動的URLを作る基本

Next.jsでDynamic Routesを作る基本は、ファイル名を角括弧で囲むことです。たとえばappフォルダを使う場合、blogフォルダの中に次のようなファイルを作ります。

// app/blog/[id]/page.jsx
export default function BlogDetail({ params }) {
  return (
    <div>
      <h1>ブログ記事の詳細ページ</h1>
      <p>記事ID: {params.id}</p>
    </div>
  );
}

この場合、idの部分が動的に変わります。たとえばblog/1やblog/abcのようなURLにアクセスすると、それぞれparams.idに値が入ります。

ここで出てきたparamsとは、URLの情報を受け取るための仕組みです。パラメータとは値を受け渡すための入れ物のようなものと考えるとわかりやすいです。

3. useRouterを使って動的ルートを取得する方法

3. useRouterを使って動的ルートを取得する方法

Dynamic Routesでは、URLの値を取得して画面に表示したり、データを読み込んだりします。クライアントコンポーネントで使う場合はuseRouterやuseParamsを使います。

"use client";
import { useParams } from "next/navigation";

export default function ProductPage() {
  const params = useParams();

  return (
    <div>
      <h1>商品ページ</h1>
      <p>商品ID: {params.id}</p>
    </div>
  );
}

useParamsはURLの動的部分を取得するためのフックです。フックとは、機能を呼び出すための特別な関数です。これを使うことで、URLに応じた表示ができます。

4. 複数のDynamic Routesを使う方法

4. 複数のDynamic Routesを使う方法

Next.jsでは複数の動的ルートを組み合わせることも可能です。たとえばカテゴリと記事IDを同時に扱うことができます。

// app/blog/[category]/[id]/page.jsx
export default function BlogPage({ params }) {
  return (
    <div>
      <h1>カテゴリ別ブログ</h1>
      <p>カテゴリ: {params.category}</p>
      <p>記事ID: {params.id}</p>
    </div>
  );
}

この場合、blog/tech/5のようなURLにアクセスすると、categoryにはtech、idには5が入ります。これにより、大規模なブログサイトやニュースサイトも効率よく構築できます。

5. Linkコンポーネントで動的URLへ移動する

5. Linkコンポーネントで動的URLへ移動する

Dynamic Routesを作ったら、ページ間の移動も必要です。Next.jsではLinkコンポーネントを使ってページ遷移を行います。

import Link from "next/link";

export default function BlogList() {
  return (
    <div>
      <h1>ブログ一覧</h1>
      <Link href="/blog/1">記事1を見る</Link>
      <br />
      <Link href="/blog/2">記事2を見る</Link>
    </div>
  );
}

Linkを使うことで、ページを再読み込みせずに高速に移動できます。これをクライアントサイドナビゲーションと呼びます。画面がなめらかに切り替わるため、使いやすいWebアプリを作れます。

6. Dynamic Routesが活躍する具体例

6. Dynamic Routesが活躍する具体例

Dynamic Routesはブログ記事詳細ページ、商品詳細ページ、ユーザープロフィールページなどで広く使われます。たとえばネットショップでは商品ごとにURLが異なりますが、仕組みは同じです。商品IDを動的に扱うことで、何百件の商品でも一つのテンプレートで表示できます。

また、検索結果ページやカテゴリページでも活用できます。URLの値に応じて表示内容を変えることで、柔軟なWebサイト構築が可能になります。

Next.jsのDynamic Routesを理解すると、実用的なWebアプリ開発が一気に広がります。動的URLを使いこなすことで、効率的で管理しやすいサイトを作ることができます。

まとめ

まとめ

今回はNext.jsのDynamic Routesについて、動的URLの基本から実践的な活用方法までを丁寧に確認しました。Next.jsはReactをベースにした人気のフレームワークであり、モダンなWebアプリ開発やブログ構築、ECサイト制作、ポートフォリオ作成など幅広い用途で利用されています。その中でもDynamic Routesは、動的ルーティングを実現するための重要な機能です。

従来のWebサイトでは、ページごとにHTMLファイルを作成する必要がありました。しかしNext.jsでは、角括弧で囲んだファイル名を使うことで、URLの一部を変数として扱うことができます。これにより、ブログ記事詳細ページ、商品詳細ページ、ユーザープロフィールページなど、データに応じて内容が変わるページを効率的に実装できます。

例えばappフォルダ配下にblogフォルダを作成し、その中にidを角括弧で囲んだディレクトリを作ることで、blog配下の動的URLに対応できます。この仕組みにより、URLパラメータを受け取り、サーバーコンポーネントやクライアントコンポーネント内で値を取得し、画面表示やデータ取得処理に活用できます。これはNext.jsのルーティング設計において非常に重要な考え方です。

また、useParamsやuseRouterといったフックを活用することで、クライアント側でもURLパラメータを取得できます。フックはReactの基本概念の一つであり、状態管理や副作用処理と同様に、動的ルートの取得でも活躍します。Next.jsのDynamic RoutesとReactのフックを組み合わせることで、より柔軟なWebアプリケーション開発が可能になります。

さらに、複数のDynamic Routesを組み合わせることで、カテゴリと記事IDを同時に扱う構成も実現できます。例えばblog配下にcategoryとidを持たせることで、大規模なブログシステムやニュースサイト、学習管理システムなども構築可能です。動的URL設計はWebアプリケーションの拡張性や保守性にも直結します。

ページ遷移にはLinkコンポーネントを利用します。Linkを使用することで、クライアントサイドナビゲーションが実現され、高速でなめらかなページ遷移が可能になります。Next.jsはパフォーマンス最適化やSEOにも強いフレームワークとして知られており、動的ルーティングと組み合わせることで、実用的で高速なWebサイトを構築できます。

Dynamic Routesを理解することは、Next.js入門者から中級者へとステップアップするための重要なポイントです。動的URL、ルーティング、パラメータ取得、Linkによるページ遷移という流れを押さえることで、実践的なWebアプリ開発の基礎がしっかりと身につきます。

サンプルプログラムで復習

ここで、Dynamic Routesの基本をもう一度確認しましょう。以下は動的URLからパラメータを受け取り表示する基本的なNext.jsのサンプルです。

// app/profile/[userId]/page.jsx
export default function ProfilePage({ params }) {
  return (
    <div>
      <h1>ユーザープロフィール</h1>
      <p>ユーザーID: {params.userId}</p>
    </div>
  );
}

このように、Next.jsのDynamic Routesを活用すれば、URL設計とコンポーネント設計を連動させた効率的な開発が可能です。ブログ構築、商品一覧ページ、詳細ページ設計、カテゴリ管理、ユーザー管理など、実務で頻繁に使われる機能の多くがこの動的ルーティングの仕組みで支えられています。