ADNKDN

Next.js App Routerでのパス指定

2024-01-07

適当な状態で作って放置していたけれど、ようやく一覧にページネーションを作った。
が、2ページ目3ページ目が意図した表示にならない。
generateStaticParams をちゃんと理解しようという話だった。
https://nextjs.org/docs/app/api-reference/functions/generate-static-params

App Router環境、明示しなければ client component ではなく、server component になるので、 /pages/[pageNum] のようなDynamic Routes を使うパス指定の場合、 [pageNum] にあたる部分に何が入るのかをサーバー側で処理できるように先に教えてあげる必要があった。
ページネーションの場合は、記事数から計算して必要なページ数分の数値を↓のような形で配列を作って generateStaticParams で returnする。

export async function generateStaticParams() {
  [
    { pageNum: "1" },
    { pageNum: "2" },
    { pageNum: "3" },
    ...
  ]
}


microCMSにはリストを取得するときに全体の件数を取得するので↑はOK。

ただ、記事表示の時には全件取得したいが用意されていなさそうに見えたので、10件ずつ再帰的に取得して組み立てた。
が、今あらためて見ると全件取得のAPIがあるっぽい。
また今度試してみるかなぁ。
https://help.microcms.io/ja/knowledge/fetch-big-data

記事一覧