Next.js Pages Routerで動的ルーティングを完全ガイド！初心者でもわかるURLの仕組み
生徒
「Next.jsって、ページを自動で切り替えられるって聞いたんですが、本当ですか？」
先生
「はい。Next.jsでは、ファイル名だけでページのURLが決まります。」
生徒
「じゃあ、商品ページみたいに、番号が変わるURLも作れるんですか？」
先生
「それが、Pages Routerの動的ルーティングです。仕組みから順番に見ていきましょう。」
1. Next.js Pages Routerとは何か
Next.jsのPages Routerとは、pagesフォルダの中に作ったファイルが、そのままWebページになる仕組みです。 たとえば、pages/index.jsはトップページ、pages/about.jsは「/about」というURLになります。 プログラミング未経験の方は、フォルダ＝本棚、ファイル＝本だと考えてください。 本棚に本を置くだけで、読む場所が自動的に決まるようなイメージです。
2. 動的ルーティングとは？
動的ルーティングとは、URLの一部が変わっても同じページで表示できる仕組みです。 たとえば「/user/1」「/user/2」のように、数字だけが変わるページを一つのプログラムで表示できます。 現実で例えると、名札の名前だけ差し替えるようなものです。 枠は同じで、中身だけが変わります。
3. ファイル名で動的ルーティングを作る方法
Pages Routerでは、ファイル名を角かっこで囲むだけで動的ルーティングができます。 たとえば「pages/user/[id].js」と書くと、「id」の部分が自由に変わるURLになります。
function UserPage() {
return (
<div>
<h1>ユーザーページです</h1>
</div>
);
}
export default UserPage;
4. useRouterでURLの値を受け取る
URLの中の「id」を使いたいときは、Next.jsのuseRouterを使います。 useRouterとは、今開いているページの住所を教えてくれる道案内のようなものです。
import { useRouter } from "next/router";
function UserPage() {
const router = useRouter();
const { id } = router.query;
return (
<div>
<h1>ユーザーIDは{id}です</h1>
</div>
);
}
export default UserPage;
5. 複数の動的ルーティングを使う場合
動的ルーティングは一つだけでなく、複数使うこともできます。 たとえば「/blog/2024/01」のようなURLです。 フォルダを重ねることで、より細かいページ分けができます。
import { useRouter } from "next/router";
function BlogPage() {
const router = useRouter();
const { year, month } = router.query;
return (
<div>
<h1>{year}年 {month}月の記事一覧</h1>
</div>
);
}
export default BlogPage;
6. 動的ルーティングとリンクの関係
動的ルーティングのページにも、普通のリンクと同じように移動できます。 Next.jsではLinkコンポーネントを使うと、ページ移動が速くなります。 これは、次に読むページを先に準備してくれるイメージです。
import Link from "next/link";
function Home() {
return (
<div>
<Link href="/user/10">ユーザー10を見る</Link>
</div>
);
}
export default Home;
7. Pages RouterとApp Routerの違いを軽く理解する
Pages Routerは、昔からある分かりやすい仕組みで、初心者でも理解しやすいのが特徴です。 ファイル名とURLが直結しているため、「なぜこのページが表示されるのか」が目で見て分かります。 動的ルーティングも、角かっこを使うだけなので、難しい設定は不要です。 まずはPages Routerで、URLとページの関係に慣れることが大切です。
