Next.jsのDynamic Routes完全解説！初心者でもわかるNext.jsの動的ルートの仕組み

1. Next.jsの動的ルートとは？

1. Next.jsの動的ルートとは？

Next.jsの動的ルートとは、URLの一部を変数のように扱うことで、同じページ構造を使いながら表示内容を切り替える仕組みです。通常のページは固定されたURLで表示されますが、動的ルートではURLの値に応じてデータを変えることができます。

たとえば、ブログの記事ページを考えてみましょう。記事ごとにページを作るのではなく、ひとつのテンプレートを使ってURLの番号や文字列によって内容を切り替えます。これにより、効率よくWebアプリケーションやサイトを作ることができます。

動的という言葉は、状況に応じて変わるという意味です。つまり動的ルートとは、状況に応じて中身が変わるページのことです。

2. ファイル名でルートを作る仕組み

2. ファイル名でルートを作る仕組み

Next.jsでは、フォルダやファイル名がそのままURLになります。これをファイルベースルーティングと呼びます。たとえば、appフォルダの中にaboutというフォルダを作ると、aboutというURLになります。

動的ルートを作る場合は、フォルダ名を角括弧で囲みます。これが変数の役割を持ちます。

app/blog/[id]/page.jsx

export default function BlogPage({ params }) {
  return (
    <div>
      <h1>ブログ記事ページ</h1>
      <p>記事ID: {params.id}</p>
    </div>
  );
}

上の例では、idという部分が変わる値になります。URLがblog/1なら1が入り、blog/helloならhelloが入ります。

3. paramsとは何か？

3. paramsとは何か？

paramsとは、URLの変化する部分を受け取るための仕組みです。動的ルートで指定した名前が、そのままparamsの中に入ります。

これは荷物のラベルのようなものです。箱に番号が書いてあれば、その番号を見て中身を判断できます。URLも同じで、番号や名前によって表示内容を変えます。

export default function ProductPage({ params }) {
  const productId = params.id;

  return (
    <div>
      <h1>商品ページ</h1>
      <p>選ばれた商品番号は {productId} です。</p>
    </div>
  );
}

4. 複数の動的ルートを使う方法

4. 複数の動的ルートを使う方法

Next.jsでは、動的ルートを複数組み合わせることもできます。たとえば、カテゴリと記事番号の両方をURLに含めることができます。

app/shop/[category]/[item]/page.jsx

export default function ItemPage({ params }) {
  return (
    <div>
      <h1>商品詳細ページ</h1>
      <p>カテゴリ: {params.category}</p>
      <p>商品名: {params.item}</p>
    </div>
  );
}

このようにすることで、shop/electronics/tvのようなURLに対応できます。

5. 動的ルートでデータを表示する

5. 動的ルートでデータを表示する

実際のWebアプリケーションでは、URLの値をもとにデータを取得して表示します。たとえば記事番号に応じて内容を切り替えます。

const posts = {
  "1": "はじめてのNext.js",
  "2": "Dynamic Routesの基礎"
};

export default function PostPage({ params }) {
  const title = posts[params.id];

  return (
    <div>
      <h1>記事タイトル</h1>
      <p>{title}</p>
    </div>
  );
}

このように、URLの値を使ってデータを選びます。これが動的ルートの本当の力です。

6. 静的ルートとの違いを理解しよう

6. 静的ルートとの違いを理解しよう

静的ルートは、あらかじめ決まったページです。たとえばaboutやcontactのようなページです。一方、動的ルートはURLによって内容が変わります。

たくさんの商品や記事を扱うサイトでは、動的ルートが必須になります。同じ設計図で、番号や名前だけ変えて表示するイメージです。

Next.jsのDynamic Routesを理解すると、ブログ、ニュースサイト、ECサイト、会員ページなど、さまざまなWebアプリケーションを作る基礎が身につきます。

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

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

よくある間違いは、角括弧を付け忘れることです。角括弧がないと動的ルートになりません。また、paramsの名前はフォルダ名と同じにする必要があります。

Next.jsの動的ルートは、ファイル名とURLの関係を理解することが一番大切です。ファイル構造を正しく作ることで、自然と正しいルーティングになります。

最初は難しく感じるかもしれませんが、URLが変数のように使えると考えると理解しやすくなります。これがNext.jsのDynamic Routesの基本的な仕組みです。

まとめ

まとめ

今回はNext.jsのDynamic Routesについて、基礎から応用まで順番に整理して理解してきました。Next.jsの動的ルートは、URLの一部を変数のように扱い、同じページ構造を使いながら表示内容を切り替える仕組みです。ファイルベースルーティングを採用しているNext.jsでは、フォルダ名やファイル名がそのままURLに対応します。そのため、appディレクトリの構造を正しく設計することが、Webアプリケーション開発において非常に重要になります。

特に重要なのは、角括弧で囲んだフォルダ名が動的ルートとして機能するという点です。blogの下にidという角括弧付きフォルダを作成すれば、blogの後ろに入る値がparamsとして受け取れるようになります。この仕組みを理解することで、ブログ記事一覧、商品詳細ページ、ニュース記事ページ、会員専用ページなど、さまざまなWebサイト構造に対応できるようになります。

Next.jsのDynamic Routesは、単にURLを変化させるだけではありません。URLパラメータをもとにデータを取得し、データベースや外部APIと連携することで、本格的なWebアプリケーション開発が可能になります。Reactのコンポーネント設計と組み合わせることで、再利用性の高い設計ができるのも大きな特徴です。Next.jsとReactを組み合わせたモダンなフロントエンド開発では、動的ルーティングは欠かせない基礎知識といえます。

また、静的ルートとの違いを理解することも重要です。静的ルートは固定されたURLに対応するページであり、会社概要やお問い合わせページのような内容が変わらないページに向いています。一方で、動的ルートはURLによって表示内容が変わるため、記事数や商品数が増えても効率よく管理できます。大量のコンテンツを扱うサイトでは、Dynamic Routesの活用が開発効率を大きく左右します。

初心者がつまずきやすいポイントとしては、フォルダ名とparamsの名前を一致させること、角括弧を正しく使うこと、ファイル構造を正しく配置することが挙げられます。Next.jsのルーティングはファイル構造がすべての基礎になります。フォルダ構成をしっかり理解することで、URL設計と画面設計を自然に結び付けることができます。

さらに発展的な使い方としては、複数の動的ルートを組み合わせる方法があります。カテゴリと商品名、ユーザー名と投稿番号など、複数の値をURLに含めることで、より柔軟なページ構成が可能になります。これはECサイトやブログシステム、ポータルサイト開発において非常に実践的なテクニックです。

Next.jsのDynamic Routesを理解することは、Next.js入門における大きな一歩です。Reactの基礎、コンポーネント設計、propsの受け渡し、そしてURLパラメータの活用を組み合わせることで、実務レベルのWebアプリケーション開発に近づきます。動的ルーティングは単なる機能ではなく、Webサイト設計そのものを支える重要な概念です。

理解を深めるサンプルコード

app/user/[username]/page.jsx

const users = {
  taro: "東京在住のエンジニア",
  hanako: "大阪在住のデザイナー"
};

export default function UserPage({ params }) {
  const profile = users[params.username];

  return (
    <div>
      <h1>ユーザープロフィール</h1>
      <p>ユーザー名: {params.username}</p>
      <p>紹介文: {profile}</p>
    </div>
  );
}

このようにNext.jsの動的ルートを活用すれば、URL設計とデータ表示を密接に結び付けることができます。Next.js学習においてDynamic Routesは避けて通れない重要なテーマです。繰り返しコードを書いて確認しながら理解を深めていきましょう。