技術とかの雑なToday I Learnedメモ

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

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

このサイト、ホームにアクセスすると今まで投稿した記事の一覧がすべて表示されるのだけど、さすがに記事数も多くなってきてるなと思ったので、前からやろうとしていた月別の一覧を作ろうと思い手を付け始めた。

ページネーションできるようにする · Issue #3 · tagucch/random.tagucch.dev

申し訳程度のIssueとコメントがあった。

コメントどおり、ページネーションではなく月別に表示したい。それは、月ごとの日数がバラバラなのでページネーションにすると1ページの表示数と月ごとの記事数がズレて気持ち悪いから。

このサイトはメモ置き場なので、自分のメモを雑に書いていく。

  • 必要なページ
    • 月ごとの一覧
      • /pages/posts/[year-month].tsx
        • これだと[id].tsxとの区別がつかないがどうするか
      • /pages/posts/[year]/[month].tsx
        • 年も用意して年ごとのページも?
        • 一年まるまるの一覧がみたいかというとそうでもない気もする
        • あってもいいが、わざわざ一覧ページをSSGで生成するコストもあるのでなくてもいいか
  • 月ごとのページを/pages/posts/[year-month].tsxで出す場合
    • これが一番自然な感じがするのでこれにしたいが……
    • idとyear-monthの区別をつける方法を考える
    • Routing: Dynamic Routes | Next.js
      • /pages/posts/[...slug].tsxで、/pages/posts/2022-01-01は取得しないが/pages/posts/2022/01は取得するっぽい
      • これか……?
      • /pages/posts/2022にアクセスされた場合に「そんな記事ないよ」になる
  • ホーム(/)にアクセスした場合、そのときの日付の最新の月一覧にしたい
    • ビルドしたときに最新のディレクトリの記事(2022-03とか)の一覧をホームで取得するようにするのがよさそう

という感じ。

ルーティングについてはもうちょっと調べたいけど、↑の方法以外だとそもそも/pages/posts/...を諦めることになるが、ことになるが、どうしようかな。

いつも参考にさせてもらっているblog.owlcode.netさんでは/pages/month/2022-03のような形式みたい。これでもいいな。