microCMSとNext.jsでのカテゴリーごとのページネーション

/src/app/[category]/page/[number]/page.tsx

export async function generateStaticParams() {
  // コンテンツを取得
  const contentsData = await getMicroCMSDataList('contents')
  // コンテンツの合計数
  const { totalCount } = contentsData
  // ページネーションの範囲
  const range = (start: number, end: number) =>
    [...Array(end - start + 1)].map((_, i) => start + i)
  // カテゴリーを取得
  const categoriesData: MicroCMSCategoryData = await getMicroCMSData('category')
  // [category]と[number]に当てはめるための値を設定
  const categoryParams = categoriesData.contents.flatMap((content) =>
    range(1, Math.ceil(totalCount / PER_PAGE)).map((number) => ({
      category: content.english,
      number: number.toString(),
    }))
  )
  return categoryParams
}

export default async function Category({ params }) {
  // generateStaticParamsのcategoryParamsから[category][number]の値を取り出す
  const { category, number } = params
  const currentNumber = Number(number)
  // カテゴリー取得
  const categoriesData = await getMicroCMSData('category')
  // 各ページのカテゴリー取得
  const categoryData = categoriesData.contents.filter(
    (content) => content.english === category
  )
  // カテゴリーのidを取得
  const categoryId = categoryData[0]?.id
  // 各ページ内で取得するコンテンツ
  const contentsData = await getMicroCMSDataList(
    'contents',
    (currentNumber - 1) * 10,
    10,
    categoryId
  )
  const { contents, totalCount } = contentsData
}

export async function getMicroCMSDataList(
  contentId, // 取得したいコンテンツ種類
  offsetNumber = 0, // 何件目から取得するか
  limitNumber = 100, // 何件目まで取得するか
  categoryId? // 取得したいカテゴリーのid
) {
  const res = await client.getList({
    endpoint: contentId,
    queries: {
      offset: offsetNumber,
      limit: limitNumber,
      // ここでコンテンツの持つcategoryとcategoryIdが一致していれば
      filters: categoryId ? `category[equals]${categoryId}` : '',
    },
  })
  return res
}

<Pagination
  totalCount={totalCount} // カテゴリー内のコンテンツの合計数
  pageName={categoryName} // カテゴリー名
  currentNumber={currentNumber} // 現在のページ番号
/>

'use client'

import Link from 'next/link'
import { usePathname } from 'next/navigation'
import React from 'react'
import style from './Pagination.module.scss'
import { PER_PAGE } from '@/constants'
import textStyle from '@/styles/Text.module.scss'

export const Pagination = ({ totalCount, pageName, currentNumber }) => {
  // urlを取得
  const router = usePathname()
  // 何ページまで作成するか(1,2,3...)
  const allPageNumber = Math.ceil(totalCount / PER_PAGE)
  // 現在のページ(カテゴリートップページの場合は1を返すようにする)
  let pageNumber: number
  if (!router?.includes('page')) {
    pageNumber = 1
  } else {
    pageNumber = currentNumber
  }

  const paginationGenerator = (
    pageNumber,
    allPageNumber,
    width = 2 // 左右にいくつ番号を表示するか
  ) => {
    const left = pageNumber - width // 現在ページの左側に表示するページ番号の最大値
    const right = pageNumber + width + 1 // 現在ページの右側に表示するページ番号の最大値
    const ranges = [] //  表示するページ番号の候補を格納する配列
    const rangeWithDots = [] // ページ番号とドットを含めた、最終的に表示するページ番号を格納する配列
    let length //  前のページ番号を格納する変数
    // 1ページ目と最後のページ、および現在のページを中心としたページ番号の範囲をranges配列に格納
    for (let i = 1; i <= allPageNumber; i += 1) {
      if (i === 1 || i === allPageNumber || (i >= left && i <= right)) {
        ranges.push(i)
      } else if (i < left) {
        i = left - 1
      } else if (i > right) {
        ranges.push(allPageNumber)
        break
      }
    }

    // rangesに格納されたページ番号をそれぞれ返す
    ranges.forEach((range) => {
      if (length) {
        if (range - length === 3) {
          rangeWithDots.push(length + 1)
        } else if (range - length !== 1) {
          rangeWithDots.push('...')
        }
      }
      rangeWithDots.push(range)
      length = range
    })
    return rangeWithDots
  }

  return (
    <>
      {allPageNumber > 1 && (
        <nav className={style.container}>
          <Link
            href={`/${pageName}/page/${pageNumber - 1}`}
            className={`${style.prev} ${style.itemLink} ${pageNumber === 1 && style.current}`}
          >
            前のページに戻る
          </Link>
          <ul className={style.list}>
            {paginationGenerator(pageNumber, allPageNumber).map((page, index) => (
              <li key={index} className={style.item}>
                {typeof page === 'number' ? (
                  <Link
                    href={`/${pageName}/page/${page}`}
                    className={`${textStyle.enMd} ${style.itemLink} ${
                      page === pageNumber && style.current
                    }`}
                  >
                    {page}
                  </Link>
                ) : (
                  <span className={`${textStyle.enMd} ${style.itemDott}`}>{page}</span>
                )}
              </li>
            ))}
          </ul>
          <Link
            href={`/${pageName}/page/${pageNumber + 1}`}
            className={`${style.next} ${style.itemLink} ${
              pageNumber === allPageNumber && style.current
            }`}
          >
            次のページに戻る
          </Link>
        </nav>
      )}
    </>