Astroのサイトにページネーションを実装する方法【コピペ用コード付き】

    # [page].astroとした場合
[
  { params: { page: '1' }, props: { page: [Object] } },
  { params: { page: '2' }, props: { page: [Object] } },
  { params: { page: '3' }, props: { page: [Object] } }
]
 
# [...page].astroとした場合
[
  { params: { page: undefined }, props: { page: [Object] } },
  { params: { page: '2' }, props: { page: [Object] } },
  { params: { page: '3' }, props: { page: [Object] } }
]
  

    ---
// Astroのコンテンツコレクションを使用している場合は、getCollectionをインポート
import { getCollection } from 'astro:content';
 
export async function getStaticPaths({ paginate }) {
  // 記事のコレクションを取得 + 下書き記事を除外する
  const posts = await getCollection('blog', ({ data }) => {
    return data.isDraft === false;
  });
 
  // 記事を新しい順に並び替え
  const sortedPosts = posts.sort((a, b) => {
    return new Date(b.data.publishedAt) - new Date(a.data.publishedAt);
  });
 
  // ページネーションのパスを生成 + 1Pごとの記事数を指定
  return paginate(sortedPosts, { pageSize: 10 });
}
 
const { page } = Astro.props;
---
  

    ---
import { getCollection } from 'astro:content';
 
export async function getStaticPaths({ paginate }) {
  const posts = await getCollection('blog', ({ data }) => {
    return data.isDraft === false;
  });
  // 省略
}
---
  

    ---
const sortedPosts = posts.sort((a, b) => {
  return new Date(b.data.publishedAt) - new Date(a.data.publishedAt);
});
---
  

    ---
export async function getStaticPaths({ paginate }) {
 
  // 省略
  const sortedPosts = ...;
 
  return paginate(sortedPosts, { pageSize: 10 });
}
---
  

    [
  { params: { page: undefined }, props: { page: [Object] } },
  { params: { page: '2' }, props: { page: [Object] } },
  { params: { page: '3' }, props: { page: [Object] } }
]
  

    ---
import { getCollection } from 'astro:content';
import Layout from '@/layouts/Layout.astro';
 
export async function getStaticPaths({ paginate }) {
  const posts = await getCollection('blog', ({ data }) => {
    return data.isDraft === false;
  });
 
  const sortedPosts = posts.sort((a, b) => {
    return new Date(b.data.publishedAt) - new Date(a.data.publishedAt);
  });
 
  return paginate(sortedPosts, { pageSize: 10 });
}
 
const { page } = Astro.props;
---
 
<Layout>
  <h1>記事一覧</h1>
  <ul>
    {
      page.data.map((post) => {
        return (
          <li>
            <a href={`/blog/${post.slug}`}>
              <h2>{post.data.title}</h2>
              <p>{post.data.description}</p>
            </a>
          </li>
        )
      })
    }
  </ul>
</Layout>
  

    ---
import { getCollection } from 'astro:content';
import Layout from '@/layouts/Layout.astro';
import Pagination from '@/components/Pagination.astro';
 
export async function getStaticPaths({ paginate }) {
  // 省略
}
 
const { page } = Astro.props;
---
 
<Layout>
  <h1>記事一覧</h1>
  <!-- 記事一覧を表示 -->
  <ul></ul>
 
  <Pagination page={page} baseUrl="/blog" />
</Layout>
  

    ---
// paginate()関数で取得したpageプロパティ
const {page, baseUrl} = Astro.props;
 
// ページネーションの総ページ数
const totalPages = page.lastPage;
 
// ページ番号の配列 [1, 2, 3]のような形式で生成
const pageNumbers = Array.from({length: totalPages}, (_, i) => {
  return i + 1;
});
 
// ページ番号からページURLを生成
const getPageUrl = (pageNumber) => {
  return pageNumber === 1 ? page.url.first : `${baseUrl}/${pageNumber}`;
}
---
 
<nav class="pagination" aria-label="ページネーション">
 
  <ul class="list">
    <!-- 最初のページ -->
    <li class="item">
      {
        page.url.first ? (
          <a class="link" href={page.url.first}>&lt;&lt;</a>
        ) : (
          <span class="link">&lt;&lt;</span>
        )
      }
    </li>
 
    <!-- 前のページ -->
    <li class="item">
      {
        page.url.prev ? (
          <a class="link" href={page.url.prev}>&lt;</a>
        ) : (
          <span class="link">&lt;</span>
        )
      }
    </li>
 
    <!-- ○番目のページ -->
    {
      pageNumbers.map((pageNumber) => {
        return (
          <li class="item">
            {
              page.currentPage === pageNumber ? (
                <span class="link current" aria-current="page">{pageNumber}</span>
              ) : (
                <a class="link" href={getPageUrl(pageNumber)}>{pageNumber}</a>
              )
            }
          </li>
        );
      })
    }
 
    <!-- 次のページ -->
    <li class="item">
      {
        page.url.next ? (
          <a class="link" href={page.url.next}>&gt;</a>
        ) : (
          <span class="link">&gt;</span>
        )
      }
    </li>
 
    <!-- 最後のページ -->
    <li class="item">
      {
        page.url.last ? (
          <a class="link" href={page.url.last}>&gt;&gt;</a>
        ) : (
          <span class="link">&gt;&gt;</span>
        )
      }
    </li>
  </ul>
</nav>
 
<style>
  .pagination {
    width: 100%;
 
    .list {
      display: flex;
      justify-content: center;
      gap: 1rem;
    }
 
    .link {
      width: 4rem;
      height: 4rem;
      border: 1px solid;
      display: flex;
      align-items: center;
      justify-content: center;
 
      &.current {
        background-color: #333;
        color: #fff;
      }
    }
  }
</style>
  

    ---
// paginate()関数で取得したpageプロパティ
const {page} = Astro.props;
  

    ---
const totalPages = page.lastPage;
---
  

    ---
const pageNumbers = Array.from({length: totalPages}, (_, i) => {
  return i + 1;
});
---
  

    ---
const getPageUrl = (pageNumber) => {
  return pageNumber === 1 ? page.url.first : `${baseUrl}/${pageNumber}`;
}
  

    <!-- 最初のページ -->
<li class="item">
  {
    page.url.first ? (
      <a class="link" href={page.url.first}>&lt;&lt;</a>
    ) : (
      <span class="link">&lt;&lt;</span>
    )
  }
</li>
  

    <!-- 前のページ -->
<li class="item">
  {
    page.url.prev ? (
      <a class="link" href={page.url.prev}>&lt;</a>
    ) : (
      <span class="link">&lt;</span>
    )
  }
</li>
  

    {
  pageNumbers.map((pageNumber) => {
    return (
      <li class="item">
        {page.currentPage === pageNumber ? (
          <span class="link current" aria-current="page">
            {pageNumber}
          </span>
        ) : (
          <a class="link" href={getPageUrl(pageNumber)}>
            {pageNumber}
          </a>
        )}
      </li>
    );
  });
}