[Nextjs] getStaticPaths() の paths に値が渡せない？

Question

いつも大変お世話になっております。

投稿してから１週間くらい経ちますが、誰からもコメントがないようです。
こちらのエラー内容はあまりないものなのでしょうか？？

□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□□

表題について質問です。

WordpressとNextの組み合わせでブログサイトを作成しています。
その中で現在ページネーション機能を作成しているのですが、
どうしてもエラーが発生してしまい、上手く改善することができません。

エラー箇所は pages/entry/page/[id].js の getStaticPaths() です。

ページネーションのURLは以下を形を想定しています。

http://localhost:3000/entry/page/1
http://localhost:3000/entry/page/2
http://localhost:3000/entry/page/3
…

paths に渡す値で何かしら問題が発生していると思いますが、
pages/entry/[id].js の getStaticPaths() では問題はなく、
pages/entry/page/[id].js のみでエラーが発生しています。

pages/entry/[id].js の getStaticPaths() で渡している値は、

[
  {params: {id: '3410'}},
  {params: {id: '3405'}},
  ...
]

pages/entry/page/[id].js の getStaticPaths() で渡している値は、

[
  {params: {id: '1'}},
  {params: {id: '2'}}
  ...
]

です。
比較してみると、id の数値が異なるのみで、それ以外は全く同じになります。
なぜこのような感じになってしまうのでしょうか、、？
どなたか詳しい方がいらっしゃればご教授いただけますと幸いです。

もし不足している情報等あればお気軽にお申し付けください。
それではどうぞ宜しくお願い致します。

エラー内容

Server Error
Error: Error serializing `.postsCount` returned from `getStaticProps` in "/entry/page/[id]".
Reason: `object` ("[object Promise]") cannot be serialized as JSON. Please only return JSON serializable data types.

ソースコード

ディレクトリ構造

# 利用しているファイルのみ記述しています。

.
├── components
│   ├── Layout.js
│   ├── Pagination.js
│   └── Post.js
├── lib
│   └── posts.js
└── pages
     ├── entry
     │   ├── [id].js
     │   └── page
     │       └── [id].js
     └── index.js

lib/posts.js

import axios from "axios";
import {PER_PAGE} from "../components/Pagination";


// １ページあたりの取得ページ数
export const PER_PAGE_NUM = PER_PAGE;

// すべての記事取得
export const getAllPosts = async () => {
  const res = await axios.get(`${process.env.NEXT_PUBLIC_RESTAPI_URL}/custom/posts`);
  return res.data;
}

// 記事総数
export const getAllPostsCount = async () => {
  const res = await axios.get(`${process.env.NEXT_PUBLIC_RESTAPI_URL}/custom/posts_count`);
  return res.data;
}

// すべての記事ID取得
export const getAllPostIds = async () => {

  const res = await axios.get(`${process.env.NEXT_PUBLIC_RESTAPI_URL}/custom/posts`);

  // id を 配列(オブジェクト,オブジェクト,...) で格納
  return res.data.map((post) => {
    return {
      params: {
        id: String(post.id)
      }
    }
  });
}

// トップページの記事一覧を取得
export const getTopPagePosts = async (pageNum) => {
  const res = await axios.get(`${process.env.NEXT_PUBLIC_RESTAPI_URL}/posts?per_page=${pageNum}&page=1`);
  return res.data;
}

// １つ記事取得
export const getPost = async (id) => {
  const res = await axios.get(`${process.env.NEXT_PUBLIC_RESTAPI_URL}/posts/${id}`);
  return res.data;
}

// ページネーション -  １ページあたりの記事を取得
// pageNum : 何ページ目か
export const getPostPerPagination = async (pageNum) => {
  const res = await axios.get(`${process.env.NEXT_PUBLIC_RESTAPI_URL}/posts?per_page=${PER_PAGE_NUM}&page=${pageNum}`);
  return res.data;
}

page/entry/page/[id].js

// lib
import {getAllPostsCount, getPostPerPagination} from "../../../lib/posts";

// components
import Layout from "../../../components/Layout";
import Post from "../../../components/Post";
import Pagination, {PER_PAGE, range} from "../../../components/Pagination";


export default function PaginationPerPage({posts, postsCount}) {
  return (
    <Layout>

      <ul>
        {posts && posts.map((post) => <Post key={post.id} post={post}/>)}
      </ul>

      <Pagination postsCount={postsCount}/>

    </Layout>
  )
}

export const getStaticPaths = async () => {

  const postsCount = await getAllPostsCount();
  const pageCount = range(1, Math.ceil(postsCount / PER_PAGE));

  const paths = pageCount.map((pageNum) => {
    return {
      params: {
        id: String(pageNum)
      }
    }
  })

  return {paths, fallback: false};
}

export const getStaticProps = async ({params}) => {

  const posts = await getPostPerPagination(params.id)
  const postsCount = getAllPostsCount();

  return {
    props     : {posts, postsCount},
    revalidate: 3,
  };
}

pages/entry/[id].js

import Link from "next/link";
import {useRouter} from "next/router";

// lib
import {getPost, getAllPostIds} from "../../lib/posts";

// components
import Layout from "../../components/Layout";


const Post = ({post}) => {

  const router = useRouter();

  if (router.isFallback || !post) {
    return <div>Loading...</div>
  }

  return (
    <Layout title={post.title.rendered}>

      <h1>{post.title.rendered}</h1>

      <article>{post.content.rendered}</article>

      <Link href="/">
        <a>記事一覧へ戻る</a>
      </Link>

    </Layout>
  )
}

export default Post;

export const getStaticPaths = async () => {

  const paths = await getAllPostIds();

  return {paths, fallback: true};
}


export const getStaticProps = async ({params}) => {

  const post = await getPost(params.id);

  return {
    props     : {post},
    revalidate: 3,
  };
}

Answer 1

エラーに書いてある通りpostsCountに実データではなくPromiseを返しているからだと思います。

Server Error
Error: Error serializing `.postsCount` returned from `getStaticProps` in "/entry/page/[id]".
Reason: `object` ("[object Promise]") cannot be serialized as JSON. Please only return JSON serializable data types.

以下の行を

  const postsCount = getAllPostsCount();

以下のように直してみてください。

  const postsCount = await getAllPostsCount();