👯
Dynamic Routesが2つあるときのgenerateStaticParams()の書き方
いきなりですが
//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から読み込める)
サンプルコードを参考しにながら書いたのがこちら↓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で読み込めません
Discussion