【Next.js】備忘録：pageルートでURLにIDをいれる

はじめに

こんにちは、エンジニアのkeitaMaxです。

Next.jsで開発を行っている時に調べたことなどを記録しておきます。

作りたいもの

会議の一覧を以下のURL

http://localhost:3000/conferences/

会議で行うLTの一覧を以下のURL

http://localhost:3000/conferences/1/lightning-talks/

LTに対してのコメントの一覧を以下のURL

http://localhost:3000/conferences/1/lightning-talks/2/comments

以上のようなものを作成したいと思い調べました。

やり方

動的なセグメントにマッチさせたければブラケット記法を使うことができます。名前をつけたパラメータとのマッチが可能です。
(引用：https://nextjs-ja-translation-docs.vercel.app/docs/routing/introduction)

上に書いてあるように、以下のようにフォルダを作成しました。

pages/
 └ conferences/
    　├ index.tsx
    　└ [conference-id]/lightning-talks/
                        　├ index.tsx
                        　└ [lightning-talk-id]/comments/
                                                　└ index.tsx

[conference-id]に会議のIDを、[lightning-talk-id]にLTのIDを入れるようにしました。

ページ遷移

Next.js のルーターは、シングルページアプリケーションのようにクライアントサイドでのページ間遷移が可能です。
(引用：https://nextjs-ja-translation-docs.vercel.app/docs/routing/introduction)

ページ遷移をするには以下のようにするとできるそうです。

<Link href="/conferences/1/lightning-talks/">
  <a>LT一覧ページへ</a>
</Link>

おわりに

この記事での質問や、間違っている、もっといい方法があるといったご意見などありましたらご指摘していただけると幸いです。

最後まで読んでいただきありがとうございました！

参考