import Link from "next/link";
import { FC } from "react";
import styles from "@/app/styles/BlogPagenation.module.css"; //CSSはお好みで

interface BlogPaginationProps {
  totalCount: number;
}

export const BlogPagination: FC<BlogPaginationProps> = ({ totalCount }) => {
  const PER_PAGE = 6; // 6記事ずつ

  //配列を作成
  const range = (start: number, end: number) => {
    const length = end - start + 1;
    return length > 0 ? [...Array(length)].map((_, i) => start + i) : [];
  };

  return (
    <div className={styles.BlogPagenation}>
      <ul>
        {/* 作成した配列をPER_PAGE(6)で割る（例えば12記事あるなら÷6でページネーションのリスト数として2が返る） */}
        {range(1, Math.ceil(totalCount / PER_PAGE)).map((number, index) => (
          <li key={index}>
            <Link href={`/blog/page/${number}`}>{number}</Link>
          </li>
        ))}
      </ul>
    </div>
  );
};

import { BlogPagination } from "@/app/components/BlogPagination";

//microCMSのブログデータ取得
async function getBlogPosts() {
  const postsResponse = await client.get({
    customRequestInit: {
      cache: "no-store", // キャッシュを利用せずに常に新しいデータを取得
    },
    endpoint: "blog",
    queries: {
      offset: 0, //offsetを0とする
      limit: 6, //6記事ずつ
      fields: "id,title,content,eyecatch,category,createdAt,updatedAt", // 取得するフィールドを指定
    },
  });

  const totalCount = postsResponse.totalCount;
  const posts = postsResponse.contents;
  return { posts, totalCount }; //オブジェクトとして返す
}

export default async function Blog() {
　let { posts, totalCount }: any = await getBlogPosts(); //オブジェクトを分解して posts と totalCount の両方を取得

　return (
    <>
　　　 ...ブログ記事の展開記述...

      <BlogPagination totalCount={totalCount} />
    </>
  );
}

import Link from "next/link";
import { BlogPagination } from "@/app/components/BlogPagination";
import { client } from "@/app/libs/client";
import styles from "@/app/blog/page.module.css";  //CSSはお好みで
import "@/app/styles/globals.css";  //CSSはお好みで

const PER_PAGE = 6; // 6記事ずつ

async function getBlogPosts(params: any) {
  const id = params.id;
  const offset = (id - 1) * 6; //ポイント

  const postsResponse = await client.get({
    customRequestInit: {
      cache: "no-store",
    },
    endpoint: "blog",
    queries: {
      offset: offset,
      limit: 6, //6記事ずつ
      fields: "id,title,content,eyecatch,category,createdAt",
    },
  });
  const totalCount = postsResponse.totalCount;
  const posts = postsResponse.contents;
  return { posts, totalCount };
}

export default async function BlogPageId({ params }: any) {
  let { posts, totalCount }: any = await getBlogPosts(params);

  return (
　　 <>
　　　 ...ブログ記事の展開記述...

  　　<BlogPagination totalCount={totalCount} />
　　 </>
  );
}