Next.jsのDynamic Routes完全入門！[id]フォルダで学ぶ動的ルーティングの基本と使い方

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

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

Next.jsのDynamicRoutesとは、URLに含まれる値に応じて表示内容を切り替える仕組みです。たとえばブログサイトでは、article1やarticle2など記事ごとにURLが変わります。このように数字や文字が変化する部分を動的ルートと呼びます。

通常のページはaboutやcontactのように固定されたURLです。しかし動的ルーティングでは、同じテンプレートを使いながら表示内容だけを切り替えます。これにより効率的なWebアプリ開発が可能になります。

DynamicRoutesはフォルダ名を角括弧で囲むことで作成します。これがNext.jsの大きな特徴の一つです。

2. [id]フォルダの基本構造を理解しよう

2. [id]フォルダの基本構造を理解しよう

Next.jsではappフォルダやpagesフォルダの中に角括弧付きのフォルダを作ります。たとえば[id]というフォルダを作ると、その部分がURLの変化部分になります。

例として、ブログ記事詳細ページを作る場合を考えてみます。

export default function Page({ params }) {
  return (
    <div>
      <h1>記事ID: {params.id}</h1>
    </div>
  );
}

このコードではparams.idという値を表示しています。paramsとはURLの情報が入った箱のようなものです。idの部分に入った値を取り出して画面に表示しています。

3. URLとparamsの仕組みをやさしく解説

3. URLとparamsの仕組みをやさしく解説

URLとはインターネット上の住所のことです。たとえばexample.com/blog/5というURLがある場合、5の部分が動的な値です。この値をNext.jsが自動で読み取ってくれます。

paramsはその値を受け取るための仕組みです。郵便受けのようなものだと考えると理解しやすいでしょう。URLという手紙が届き、その中身をparamsが受け取ります。

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

  return (
    <div>
      <p>選択された番号は {id} です。</p>
    </div>
  );
}

このように変数に代入してから使うこともできます。

4. リンクを使って動的ページへ移動する方法

4. リンクを使って動的ページへ移動する方法

Next.jsではLinkコンポーネントを使ってページ移動を行います。通常のaタグとは異なり、高速なページ遷移が可能になります。

import Link from "next/link";

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

この例ではblogフォルダの中に[id]フォルダがある想定です。1や2の部分が動的に変化します。

5. 存在しないIDへの対応方法

5. 存在しないIDへの対応方法

動的ルートでは存在しない番号が入力されることもあります。その場合は条件分岐を使って表示を切り替えます。

export default function Page({ params }) {
  const validIds = ["1", "2", "3"];

  if (!validIds.includes(params.id)) {
    return <h1>ページが見つかりません</h1>;
  }

  return <h1>記事ID: {params.id}</h1>;
}

includesとは配列の中に値があるか確認する方法です。これにより安全なページ表示ができます。

6. 複数の動的ルートを使う場合

6. 複数の動的ルートを使う場合

Next.jsではフォルダを入れ子にすることで複数の動的ルートを作れます。たとえばcategoryとidの両方を使うことができます。

blogフォルダの中に[category]フォルダ、その中に[id]フォルダを作ると、blog/news/5のようなURLに対応できます。

export default function Page({ params }) {
  return (
    <div>
      <p>カテゴリ: {params.category}</p>
      <p>記事番号: {params.id}</p>
    </div>
  );
}

このように複数の値を同時に取得できます。大規模なWebアプリやブログサイトでも柔軟に対応できます。

まとめ

まとめ

今回はNext.jsのDynamicRoutesを中心に、[id]フォルダを使った動的ルーティングの基本構造から応用までを丁寧に学びました。Nextjs動的ルーティングは、ブログサイトやニュースサイト、商品詳細ページなど、同じレイアウトを使いながら表示内容だけを切り替えたい場面で非常に重要な技術です。Nextjs初心者にとっては少し難しく感じるかもしれませんが、フォルダ名を角括弧で囲むというシンプルなルールを理解すれば、仕組みは決して複雑ではありません。

DynamicRoutesの基本は、URLの変化する部分をフォルダ名で表現することです。[id]というフォルダを作成するだけで、Nextjsは自動的にURLパラメータを受け取り、paramsとしてページコンポーネントに渡してくれます。この仕組みによって、ブログ記事詳細ページやユーザー詳細ページ、商品詳細ページなどを効率よく実装できます。Nextjsブログ作成やNextjs商品ページ開発において、動的ルートの理解は欠かせません。

また、params.idを使えば、URLに含まれる値を簡単に取得できます。URL設計とルーティング設計を正しく行うことで、検索エンジンにも理解されやすい構造になります。わかりやすいURL構造は利用者にとっても利便性が高く、結果としてサイト全体の評価向上にもつながります。Nextjsルーティング設計では、可読性の高いパス設計を心がけることが大切です。

Linkコンポーネントを使ったページ遷移も重要なポイントでした。NextjsLinkを利用することで、高速な画面遷移が実現でき、利用者体験が向上します。動的ルートとLinkを組み合わせることで、記事一覧から記事詳細ページへ自然に移動できる構造を作ることができます。Nextjsページ遷移とDynamicRoutesの連携は実務でも頻繁に使われます。

さらに、存在しないIDへの対応も忘れてはいけません。条件分岐を使って正しいIDかどうかを確認することで、安全なページ表示が可能になります。Nextjsエラーハンドリングや条件分岐処理を適切に行うことは、安定したWebアプリ開発に欠かせません。特にNextjs本番運用を考える場合、想定外のURL入力にも対応できる設計が重要です。

複数の動的ルートを組み合わせた構造も学びました。[category]と[id]を組み合わせることで、カテゴリ別記事ページのような高度な構造を実現できます。Nextjs入れ子ルーティングは大規模サイト構築で非常に役立ちます。Nextjsアプリ開発では、フォルダ構成そのものがルーティング設計になるため、設計段階から全体構造を意識することが成功の鍵となります。

ここで、理解をさらに深めるための簡単なサンプルをもう一度確認してみましょう。NextjsDynamicRoutesの基本形を復習します。

export default function Page({ params }) {
  const validIds = ["1", "2", "3"];

  if (!validIds.includes(params.id)) {
    return <h1>ページが見つかりません</h1>;
  }

  return (
    <div>
      <h1>記事ID: {params.id}</h1>
      <p>このページはNext.jsのDynamic Routesで生成されています。</p>
    </div>
  );
}

このように、paramsの値を確認しながら表示を切り替えることで、安全で柔軟な動的ページを作成できます。Nextjs動的ページ生成は、現代のWeb開発において必須の知識です。ブログ構築、ポートフォリオ制作、業務システム開発など、あらゆる場面で活用できます。

NextjsDynamicRoutesを理解すると、単なる静的ページ制作から一歩進んだアプリケーション開発が可能になります。URLパラメータ取得、動的ページ表示、入れ子ルーティング、条件分岐処理などを組み合わせることで、柔軟性の高い構造を実現できます。今回学んだ内容を何度も復習し、実際に小さなブログアプリを作ってみることで理解はさらに深まるでしょう。