---

import Layout from "@layouts/Layout.astro";
import { getBlogs } from "@library/microcms";
import type { GetStaticPathsOptions } from 'astro';

export const getStaticPaths = async ({ paginate }: GetStaticPathsOptions) => {
  const blogs = await getBlogs({ limit: 100 });  // 100ページまでしか指定できない
  return paginate(blogs.contents, { pageSize: 3 });  // 1ページ毎の記事数
};
const { page } = Astro.props;

---

<Layout title="ページネーション">
  <h1>{Astro.params.page}ページ目</h1>
  <ul>
    {page.data.map((blog) => {
      return (
      <li><a href={blog.id}>{blog.title}</a></li>);
    })}
  </ul>

  <nav>
    <p>page {page.currentPage}/{page.lastPage} </p>

    <!-- URLが存在しない場合はundifinedが返される -->
    <a href={page.url.prev}>前へ</a>  
    <a href={page.url.next}>次へ</a>
  </nav>
</Layout>