本サイトでも動的ルーティングを使用してブログの個別ページを表示している。ただ、チュートリアルに沿ってほぼコピペで実装したので、理解ができていない部分が大きい。

ということで今一度動的ルーティングについて理解するため記事を書くことにした。

環境

Next.js 14.0.3 (App router)

Typescript

動的(ダイナミック)ルーティングを使用するメリット

chatGPTに動的ルートを使用するメリットについて聞いたらあまりにもわかりやすく書いてくれたのでそのまま載せます。

動的ルートを使用するメリットについて、小学生でもわかるように説明しますね。

想像してみてください、あなたが「動物園の案内人」です。動物園にはたくさんの動物がいて、それぞれに違う家（エリア）があります。ライオンの家、キリンの家、ペンギンの家などです。でも、この動物園は特別で、新しい動物が来るたびに新しい家を作らなくても、自動的にその動物のための家が現れるんです！

ここでの「動物園」がウェブサイトで、「動物の家」がウェブページになります。通常のウェブサイトでは、新しいページ（動物の家）を作るためには、開発者（案内人）が一つ一つ手作業で作らないといけません。でも、動的ルート（自動で家が現れる魔法）を使えば、開発者は新しいページを一つ一つ作る必要がなくなります。

たとえば、動物園に「ハナ」という名前の新しいゾウが来たとします。動的ルートがあれば、自動的に「ハナの家」が作られます。別の動物「タロウ」というキリンが来たら、同じように「タロウの家」も自動的に作られます。これは、ウェブサイトで言うと、新しいページが自動的に作られることを意味します。

メリットは主に以下の通りです：

1. 時間と労力の節約：

同じ種類のページをたくさん作る必要がある場合（たくさんの動物の家を作る場合）、それぞれのページ（家）を一つ一つ作るのは大変です。動的ルートを使えば、自動的にこれらのページが作成されるので、開発者はもっと大切なことに時間を使えます。

2. 柔軟性：

新しい動物（ページの内容）がいつ来るかわからない動物園では、いつでも迎えられるように準備しておく必要があります。動的ルートを使えば、新しい内容が追加されたときに自動的に新しいページが作られるので、とても柔軟に対応できます。

3. 整理整頓：

すべての動物の家が同じルールに従って作られるので、動物園（ウェブサイト）はとても整理された状態を保つことができます。これにより、訪れる人々（ウェブサイトの訪問者）は迷わずに欲しい情報（動物の家）を見つけることができます。

このように、動的ルートはウェブサイトを作るときにとても便利で、開発者の作業を楽にし、訪問者にとっても使いやすいサイトを作ることができます。

実装

テストページ作成

テストページを作ってみて動作確認。

src/app/hoge/[fuga]/page.tsxを作成。

const StaticHogePage = ({ params }: { params: { fuga: string } }) => {
  return <div>{params.fuga}</div>;
};

export default StaticHogePage;

この場合、hoge直下のURLを動的に変更することができ、そのパラメータも取得することができる。今回はhoge/testdayo として更新。想定通り、パラメータを取得できた。

終わりに

もっといろいろこねくり回さないと行けないかなと思ったけどすんなりできた。

応用でタグ別記事一覧↓も動的ルーティングで作成できて満足。今回は個人ブログでの実装だが、同様なページが大量に必要なプロジェクトだとかなり重宝しそう。

参考サイト

https://qiita.com/sintaro-katuta/items/cc60adfb653d284ef7f0

https://nextjs-ja-translation-docs.vercel.app/docs/routing/dynamic-routes

https://note.com/yoshikouki/n/n0982d71615bd