月別の記事一覧を表示するための実装 その2

3/13にぼちぼち始めた、月別の記事一覧の実装を進めた。というかなかなかやってなかったので今日結構進めた。

URLは/pages/posts/[...yearAndMonth].tsx形式にした。/pages/posts/[year]/[month].tsxにすると、/pages/posts/[id].tsxとルーティングの判別ができない(idとyearの差別化ができない)ため。ここらへんはうまいことやればできるのかな？とも思うがどうなんだろうか。

月別の記事一覧を取得する処理と、月別の記事一覧を表示するページの実装をした。/posts/2022/03にアクセスすると2022年3月の記事一覧が(開発環境で)表示されるようになった。

残りは、ホーム(/pages/index.tsx)にアクセスしたときに、最新の月別一覧を表示するように変更するのと、年月選択のセレクトボックスの表示を追加する感じになる。

Next.jsのDynamic Routingでいい感じにできそうでよかった。

Routing: Dynamic Routes | Next.js

日本語訳されたものは↓

Routing: Dynamic Routes | Next.js

/pages/posts/[...yearAndMonth].tsxとすることで、/posts/2022-03-01は/pages/posts/[id].tsxに、/posts/2022/03は/pages/posts/[...yearAndMonth].tsxにルーティングされる。

/months/2022-03のようなURLも考えたけど、表示するのはあくまでpostsなので、これでいいかな。