先生と生徒の会話形式で理解しよう

生徒

「Next.jsでブログを作りたいのですが、記事ごとにURLを変えるにはどうすればいいですか？」

先生

「そのときに使うのがDynamic Routesとslugです。Next.jsではとても簡単に設定できます。」

生徒

「slugって何ですか？難しそうです…」

先生

「slugはURLの中の名前の部分です。記事ごとに違う値を使うことで、ページを切り替えられます。それでは具体的に見ていきましょう。」

1. Next.jsのDynamic Routesとslugとは？

Next.jsのDynamic Routesとは、URLの一部を自由に変えられる仕組みです。たとえばブログ記事ページを作るとき、記事ごとに違うURLを使います。ここで使われる文字列がslugです。

たとえば次のようなURLを考えてみましょう。

example.com/blog/react入門

このreact入門の部分がslugです。記事タイトルをわかりやすい英語や日本語にしてURLに含めることで、内容が一目でわかるページになります。

Dynamic Routesは、同じテンプレートを使いながら、slugだけを変えて複数のページを表示する仕組みです。料理本のレシピページが、料理名だけ変わっているようなイメージです。

2. pagesフォルダでslugを作る方法

Next.jsでslugを使うもっとも基本的な方法は、ファイル名を角括弧で囲むことです。これを動的ルーティングと呼びます。

pagesフォルダの中にblogというフォルダを作り、その中に次のようなファイルを作成します。


import { useRouter } from "next/router";

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

  return (
    <div>
      <h1>ブログ記事ページ</h1>
      <p>slugの値は：{slug}</p>
    </div>
  );
}

ファイル名は次のようにします。


pages/blog/[slug].js

角括弧で囲んだslugが、URLの一部になります。たとえば次のURLにアクセスします。

http://localhost:3000/blog/nextjs入門にアクセスすると、画面に「slugの値は：nextjs入門」と表示されます。

このように、URLに入力した文字がそのままslugとして取得できます。

3. App Routerでのslugの扱い方

Next.jsの新しいApp Routerを使う場合は、appフォルダの中でフォルダ名を角括弧にします。


export default function Page({ params }) {
  return (
    <div>
      <h1>記事ページ</h1>
      <p>slugは：{params.slug}</p>
    </div>
  );
}

フォルダ構成は次のようになります。


app/blog/[slug]/page.js

http://localhost:3000/blog/react基礎にアクセスすると、画面に「slugは：react基礎」と表示されます。

App Routerではparamsの中にslugが入ります。仕組みは同じですが、書き方が少し違うだけです。

4. 複数のslugを使う方法

URLの中に複数の値を含めたい場合もあります。たとえばカテゴリと記事名を含める場合です。


export default function Page({ params }) {
  return (
    <div>
      <h1>カテゴリ：{params.category}</h1>
      <p>記事：{params.slug}</p>
    </div>
  );
}

フォルダ構成は次のようになります。


app/blog/[category]/[slug]/page.js

http://localhost:3000/blog/javascript/変数とはにアクセスすると、カテゴリと記事名がそれぞれ表示されます。

このように、フォルダを入れ子にすることで複数のslugを扱えます。

5. generateStaticParamsで静的ページを作る

Next.jsでは、あらかじめ決まっているslugのページを事前に生成できます。これを静的生成と呼びます。


export async function generateStaticParams() {
  return [
    { slug: "nextjs入門" },
    { slug: "react基礎" }
  ];
}

export default function Page({ params }) {
  return <h1>{params.slug}の記事ページ</h1>;
}

あらかじめ指定したslugのページがビルド時に生成され、高速に表示されます。

よく使われる記事ページや商品ページでは、この方法が役立ちます。

6. catch-allルートで柔軟に対応する

URLの長さが決まっていない場合は、catch-allルートを使います。これは三点リーダーのように書きます。


export default function Page({ params }) {
  return (
    <div>
      <h1>複数パス対応ページ</h1>
      <p>{JSON.stringify(params.slug)}</p>
    </div>
  );
}

フォルダ名は次のようにします。


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

http://localhost:3000/blog/a/b/c のように複数階層でも対応できます。

slugは配列として受け取ります。これにより、自由度の高いルーティングが可能になります。

7. slugを使ったデータ取得の基本

slugは、データベースや外部データと組み合わせて使うことが多いです。たとえばslugをもとに記事データを取得します。


async function getPost(slug) {
  const posts = {
    "nextjs入門": "Next.jsの基本を学びます",
    "react基礎": "Reactの基本を解説します"
  };
  return posts[slug];
}

export default async function Page({ params }) {
  const content = await getPost(params.slug);

  return (
    <div>
      <h1>{params.slug}</h1>
      <p>{content}</p>
    </div>
  );
}

URLのslugに応じて、表示される記事内容が切り替わります。

このように、slugはページを切り替えるための目印です。Next.jsのDynamic Routesを使えば、初心者でも簡単にブログやニュースサイトのような構造を作れます。

slugの仕組みを理解することで、実践的なWebアプリ開発がぐっと身近になります。

まとめ

Next.jsのDynamic Routesとslugの重要ポイントを振り返る

今回はNext.jsのDynamic Routesとslugの仕組みについて、基礎から応用まで丁寧に解説しました。Dynamic Routesとは、URLの一部を動的に変更できるルーティング機能のことです。そしてslugとは、そのURLの中でページを識別するための文字列です。ブログ記事、ニュース記事、商品ページ、カテゴリページなど、多くのWebサイトで使われる重要な仕組みです。

Next.jsでは、pagesフォルダやappフォルダで角括弧を使うだけでslugを簡単に実装できます。これにより、同じテンプレートを使いながら、URLごとに違う内容を表示できます。特にブログ開発やポートフォリオサイト制作では、Dynamic Routesとslugの理解が必須です。

また、App Routerではparamsからslugを取得でき、より直感的なコードでページを構築できます。さらに、複数のslugを組み合わせることでカテゴリと記事を同時に扱うことができ、柔軟なルーティング設計が可能になります。

generateStaticParamsを使えば、あらかじめ決まったslugのページを静的生成できます。これにより表示速度が向上し、ユーザー体験の改善につながります。高速表示はブログ運営やWebアプリ開発において非常に重要な要素です。

catch allルートを使えば、複数階層のURLにも対応できます。例えばドキュメントサイトや階層構造のあるサービスページなどで活躍します。slugを配列として受け取ることで、柔軟なURL設計が可能になります。

さらにslugはデータベースや外部データと組み合わせて使用することで、本格的な動的Webアプリケーションを構築できます。URLとデータを結びつけることで、実用的なブログシステムやコンテンツ管理機能を実装できます。

Next.jsのDynamic Routesとslugを理解すると、Webアプリ開発の幅が一気に広がります。初心者の方でも、ファイル名の工夫だけで高度なルーティングを実現できるのがNext.jsの魅力です。

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

最後に、slugを使って記事を表示する基本的な構成をもう一度確認しましょう。以下はApp Routerを使った例です。


export async function generateStaticParams() {
  return [
    { slug: "nextjs基礎" },
    { slug: "dynamicroutes解説" }
  ];
}

async function getPost(slug) {
  const posts = {
    "nextjs基礎": "Next.jsの基本をやさしく解説します",
    "dynamicroutes解説": "Dynamic Routesとslugの使い方を理解します"
  };
  return posts[slug];
}

export default async function Page({ params }) {
  const content = await getPost(params.slug);

  return (
    <div className="container mt-4">
      <h1 className="fw-bold">{params.slug}</h1>
      <p>{content}</p>
    </div>
  );
}

あらかじめ指定したslugのページが生成され、URLに応じて記事内容が切り替わります。

このように、Dynamic Routesとslugを組み合わせることで、ブログ構築、記事管理、カテゴリ管理、商品ページ生成など、実践的なWeb開発が可能になります。Next.jsのルーティング設計を正しく理解することは、効率的なサイト制作やアプリケーション開発に直結します。

先生と生徒の振り返り会話

生徒

「Dynamic Routesとslugの意味がやっと分かってきました。URLの一部を変えるだけでページが切り替わるのですね。」

先生

「その通りです。Next.jsでは角括弧を使うだけで動的ルーティングが実現できます。とても効率的ですね。」

生徒

「App Routerではparamsからslugを取得できるのも便利でした。generateStaticParamsで静的生成できるのも理解できました。」

先生

「良い理解です。slugをデータ取得と組み合わせれば、本格的なブログやニュースサイトも作れます。」

生徒