Astro でページネーション

Astro ドキュメントのページネーションを参考。

getStaticPaths の引数として渡される paginate を使うと自動で分割して渡してくれる。
また paginate が返してくれる page props は paginate で指定した分割で分割したデータを保持する page.data や前のページの URL を保持する page.url.prev 、次のページの URL を保持する page.url.next など便利な API が生えている。

microcms-js-sdk を使う場合は getAllContent で取得したデータを paginate でコンテンツをすべて取得して分割したいデータ数を指定するだけで簡単にページネーションが作成できる。

以下 MicroCMS からデータを取得してページネーションする例

/pages/[page].astro

---
import { createClient } from "microcms-js-sdk";
import type { GetStaticPaths } from "astro";
import Layout from "../../../layouts/Layout.astro";

export const getStaticPaths = (async ({ paginate }) => {
  const client = createClient({
    serviceDomain: import.meta.env.MICROCMS_SERVICE_DOMAIN,
    apiKey: import.meta.env.MICROCMS_API_KEY,
  });
  const posts = await client.getAllContents({
    endpoint: "blogs",
  });

  return paginate(posts, { pageSize: 2 });
}) satisfies GetStaticPaths;

const { page } = Astro.props;
---

<Layout>
  <div>
    <h1>記事一覧</h1>
    <ul>
      <li>
        {
          page.data.map((post) => (
            <article>
              <h2>
                <a href={`/blog/posts/${post.id}`}>{post.title}</a>
              </h2>{" "}
            </article>
          ))
        }
        <li></li>
        <nav>
          {page.url.prev && <a href={page.url.prev}>戻る</a>}
          {page.url.prev && page.url.next && <span class="mx-4">|</span>}
          {page.url.next && <a href={page.url.next}>進む</a>}
        </nav>
      </li>
    </ul>
  </div>
</Layout>

Astro でページネーション

Astro でページネーション

コメント