【Astro＋microCMS】記事一覧ページにページネーションを作成する方法

---
import Pagination from "@components/Pagination.astro";

//microCMS呼び出し
import { getNews } from "@library/microcms";

// 1ページに表示する件数
export const postsPerPage = 10;

// getStaticPaths()で動的なルートを設定
export async function getStaticPaths({ paginate }) {
  // 総件数を取得
  const initialResponse = await getNews({
    limit: 0,
    fields: ["id"],
  });

  const totalCount = initialResponse.totalCount;

  // 50件ずつ分割して全記事を取得
  const allContents = [];
  const batchSize = 50; // 1回あたりの取得件数
  const batchCount = Math.ceil(totalCount / batchSize);

  for (let i = 0; i < batchCount; i++) {
    const batchResponse = await getNews({
      limit: batchSize,
      offset: i * batchSize,
      fields: ["title", "publishedAt"], //取得するフィールド
      orders: "-publishedAt", //公開日順でソート
    });
    allContents.push(...batchResponse.contents);
  }

  // 取得した全記事に対してページネーションを適用
  return paginate(allContents, {
    pageSize: postsPerPage,
  });
}

// propsからpageオブジェクトを取得（pageDataに現在のページの記事が含まれています）
const { page } = Astro.props;

---

{
  page.data.map((post) => (
    <div>
      <h2>{post.title}</h2>
      <p>公開日: {post.publishedAt)}</p>
    </div>
 ))
}

<Pagination currentPage={page.currentPage} totalPages={page.lastPage} url="/news/" {/* 最初のページのパスを指定 */} />

---
const { currentPage, totalPages, url } = Astro.props;

// ページ番号の配列を生成
const pages = Array.from({ length: totalPages }, (_, i) => i + 1);

// ページのURLを生成する関数
function getPageUrl(pageNum: number) {
  return pageNum === 1 ? url : `${url}${pageNum}/`;
}
---

<nav class="pagination">
  {
    currentPage > 1 && (
      <a href={getPageUrl(currentPage - 1)} class="pagination__prev">
        前へ
      </a>
    )
  }

  <div class="pagination__numbers">
    {
      pages.map((num) => (
        <a href={getPageUrl(num)} class:list={["pagination__link", { _active: num === currentPage }]}>
          {num}
        </a>
      ))
    }
  </div>

  {
    currentPage < totalPages && (
      <a href={getPageUrl(currentPage + 1)} class="pagination__next">
        次へ
      </a>
    )
  }
</nav>