ウェブサイトを作る際にお知らせ一覧ページなどで記事を10件ごと表示してページを分割することはよくあると思います。AstroとmicroCMSでは最初からページ分割に対応した機能が用意されていたので、今回はそれを参考に作りました。以下は公式ドキュメントです。

• ページネーション – ルーティング | Astro Docs

環境は以下の通りで、microcms-js-sdkを利用。

• microcms-js-sdk 3.1.x
• Astro 4.16.x

ファイル構成。

├── cast
│   ├── [id].astro
│   ├── index.astro
│   └── page
│       └── [page].astro

サンプルとしてカフェのWebサイトのキャスト一覧を表示するサンプルとしました。例ではmicroCMSのAPIのエンドポイントをcastとし、予めAPIとフィールドや投稿を作っておきます。詳しいことはmicroCMSのチュートリアルにて。

記事情報の取得

microcms-js-sdkのgetAllContentsメソッドですべての投稿を取得ができます。それを呼び出す命令をmicrocms.tsに記述しました。例ではgetCastAll()としています。

//型定義（一部略）
export type Cast = {
 id: string;
 publishedAt: string;
 title: string;
 content: string;
 eyecatch: {
  url: string;
 };
};
export type CastResponse = {
 totalCount: number;
 offset: number;
 limit: number;
 contents: Cast[];
};
/*〜〜中略〜〜*/
export const getCastAll = async () => {
 return await client.getAllContents<CastResponse>({ endpoint: 'cast' });
};

記事一覧ページ

ページネーションを行う記事一覧を作成します。例では/page/[page].astroというファイルで作成。pageSizeプロパティで１ページ内に表示する記事の個数を設定できます。例では6件にしています。

ページネーションの部分はコンポーネント化しています。

---
import Layout from '../../layouts/Layout.astro';
import { getCastAll } from '../../library/microcms';
import Pageing from '../../components/Pageing.astro'
interface Props {
 page: {
  data: Cast[];
  start: number;
  end: number;
  size: number;
  total: number;
  currentPage: number;
  lastPage: number;
  url: {
   current: string;
   next: string;
   prev: string;
  };
 };
}
const { page } = Astro.props;
export async function getStaticPaths({ paginate }) {
 const res = await getCastAll();
 return paginate(res, { pageSize: 6 }); //1ページ内の表示件数
};
---
<Layout title=`キャスト一覧 ${page.currentPage}ページ目`>
 <main>
 <h1>キャスト一覧 {page.currentPage}ページ目</h1>
 <ul>
 {
 page.data.map((content) => (
 <li><a href={`/cast/${content.id}`}>
  <img src={content.eyecatch.url} alt={content.title} loading="lazy" width="600" height="400" />
  <div>
  <h2>{content.title}</h2>
 </a></li>
 ))}
 </ul>
 <Pageing page={page} />
 </main>
</Layout>

ページネーション部分のコンポーネント

他のページでも使い回せるようにページネーション部分はコンポーネントに。/components/Pageing.astroというファイルを生成。

---
const { page } = Astro.props;
---
<p>{page.currentPage} / {page.lastPage}</p>
<p>{page.url.prev && (
 <a href={page.url.prev}>前のページへ</a>
)}
{page.url.next && (
 <a href={page.url.next}>次のページへ</a>
)}</p>

おしまい♥

タグ：AstroJamstackmicroCMS