{ category: "Front-end" }
以前の記事通りhttps://type-any.com/blog/blog-contentful-next-js-pagination-archiveカテゴリアーカイブにページネーションをつけたいなーと思っていたので、実装いたしました！今回はgetStaticPathsのロジックに絞ってお話します！
category
┗ [category] ┳ index.tsx(カテゴリアーカイブトップ)
┗ page
┗ [num].tsx前回と変えたのはカテゴリアーカイブトップを動的ルーティングのディレクトリ下のindex.tsxにしたところです。
export const getStaticPaths = async () => {
const category = await client.getEntries({content_type: "category"})
const paths = [];
for (let i = 0; i < category.items.length; i++) {
let posts = await client.getEntries({content_type: "blogPost", "fields.category.sys.id": category.items[i].sys.id, order: '-sys.createdAt'})
if (posts.items.length > 0) {
paths.push({
params: {
category: category.items[i].fields.slug.toString(),
num: "1"
}
});
for (let l = 1; l <= Math.floor(posts.items.length / 10) + 1; l++) {
paths.push({
params: {
category: category.items[i].fields.slug.toString(),
num: (l + 1).toString()
}
});
}
}
}
return { paths, fallback: false }
}
必ず1ページは表出してほしいのでこのようになりましたがもっとかんたんなロジックあったかも？このあたりもリファクタリングできそうですね、、まだまだ改修しがいがあります…！