👯

Dynamic Routesが2つあるときのgenerateStaticParams()の書き方

2024/03/18に公開

いきなりですが

//pageはページング
/blog/[category]/[page]

こんなルーティング、困りますよね、、、
何が困るって

//カテゴリごとにページ数が違う
["カテゴリA", "1"],
["カテゴリA", "2"],
["カテゴリA", "3"],
["カテゴリB", "1"],
["カテゴリB", "2"],
["カテゴリC", "1"],
["カテゴリD", "1"],
["カテゴリA", "2"],

って感じにgenerateStaticParamsの中で返さないといけないんですが、この処理を書くのがめんどくさい...

調べたところgenerateStaticParamsの引数にparamsを書けるらしい(ここでいうcategoryをparamsから読み込める)
https://nextjs.org/docs/app/api-reference/functions/generate-static-params
サンプルコードを参考しにながら書いたのがこちら↓

sample.tsx
export async function generateStaticParams({ params }: { params: { category: string } }) {
    const total = await getTotalPost(params.category);//投稿件数を取得する関数
    const totalPages = await calTotalPages(total);//投稿件数からページ数を計算する関数
    const p = Array.from({ length: totalPages }, (_, i) => ({
        category: params.category,
        number: (i + 1).toString()
    }));
    return p;
}

これでカテゴリ別にページを生成してくれるそうです。

それと注意点なんですが/blog/[category]分のgenerateStaticParamsはlayout.tsxに書かないとparamsで読み込めません

SasaTech Engineer Blog

Discussion