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

3/21の続き。

ルーティングとparams

Next.jsのルーティングと、そのルーティングで得られるparamsと、URLに必要な値がごっちゃになって難しかった。

ルーティングは/posts/2022/03のように、/pages/posts/[id].tsxに引っかからない部分を/pages/posts[...yearAndMonth].tsxで引っかかるようにした。

そのルートにアクセスした際に取得できるparams(GetStaticPropsContextのparams)は、params.yearAndMonthに配列で入っていて、params.yearAndMonth[0]が年、params.yearAndMonth[1]が月というようになっている。

そのparamsになるようにgetStaticPathsを定義していて、getStaticPathsでは

{
  paths: [
    { params: { yearAndMonth: [2021, 06] } },
    { params: { yearAndMonth: [2021, 07] } },
    // ...
  ]
}

のように返している。

Basic Features: データ取得 | Next.js

pages/[...slug] のようにページ名が catch-all ルートを使用していれば、paramsは slug という配列を含まなければなりません。たとえば、この配列が ['foo', 'bar'] であれば、 Next.js は静的に /foo/bar というページを生成します。

まさにこれをやっている。

月別記事一覧

ホーム(pages/index.tsx)の表示をするときに、最新の月の一覧が表示されるようにしたい。

それだけならその月のディレクトリ(/contents/2022-03/*とか)のファイルを取得すればいいんだけど、ホームから全ての月別記事一覧に飛びたいので、最新の月別記事だけを取得するだけじゃダメそう。

と思ってやっていたのだけど、月別記事を見たいときはその記事のページ(/posts/2022/03とか)に遷移してほしいと思っているので、ダメじゃなさそう。

2/20に書いたReact Selectを使おうと思っているので、セレクトボックスで月別一覧を表示して、onChangeに該当のページに遷移する処理を書く(まだ書いてないけど)

onChangeで遷移処理を書くので、たぶんシンプルにnext/routerのRoute.pushを使えばいけるとは思う。

月別記事一覧とは別になるんだけど、タグもReact Selectを使って選択できるようにしたい。

今のタグ一覧のページは正直かなり見にくいし、目当てのタグを探そうと思うとgrepするのが最も早いという体たらくなので、プルダウンリストから選ぶ形式にしたい。