URL のルール

今回は Wordpress からコンテンツを移行してきているのを前提としているため、URL のルールを似た形で実装していきます。

Wordpress のブログの記事で利用する URL は、標準では以下のような形となっています。

• /2017/04/17/sano-marathon/

つまり YYYY/MM/DD と日付を利用して、最後に Slug を利用して記事を作成している形です。このため、URL として利用している Slug と合わせて以下のように実装していきます。

• /YYYY/MM/DD/slug

Next.js App Router のルーティング

まずリンクを調整するためのライブラリを作成します。今回は、apps/nextjs/lib/linkBuilder.ts というファイルを作成して、コードは以下のように設定します。

この LinkBuilder に対して Slug　と公開日を渡すと、URL に変換して文字列を返す役割を実装しています。これを利用して、トップページでのリンクを単なる slug ではなく日付を含めた URL でリンクを設定します。

続いてこの URL を受けるためのページを作成します。Next.js App Router では

[...slug] といったフォルダを作成してその中に page.tsx を配置することで、slug に設定されている複数の値を取得してページを表示することができる仕組みがあります。このルーティングの仕組みを利用して、以下のページを作成します。

このコードでは [...slug] で受ける複数のパスの値を取得して、それぞれの値を表示するだけのシンプルなテストコードになります。

動作確認

準備ができたところで npm run dev で Next.js のサイトを立ち上げて、トップページにアクセスをします。URL が変わっているのはマウスカーソルなどで確認ができます。実際にクリックをすると、以下のように slug に設定されている値を取得してページが表示されています。

これでブログページの下準備ができました。この後ブログのページで実装すべき内容は以下のようになります。

• URL で指定されたコンテンツを取得してページを表示する
• URL で指定されたページがない場合はエラーページを表示する

特に２つ目に関しては、今回はすべての Slug の値を受けてページを表示する実装になっているため、該当するページがない場合の処理を入れていく必要があります。ブログの場合はエラーページを表示するだけで問題ありません。それは後日実装します。

まとめ

今回はブログの記事に向けての URL のルーティングの処理を追加しました。タグやカテゴリに関してもこの処理を入れていく形となりますが、その前に次回はブログの記事を取得したいと思います。