per_page パラメータで設定できる数値は1から100までなので、最大100件しか一度に記事を取得することができません。そして残念ながら REST API には全件取得するという機能が無いようです。

そのため、Next.js 側で再帰関数を実行して全件取得します。この辺が Jamstack の面倒なところですね…！microCMS なんかはきっと用意されているんでしょうけど。

const listAllPosts = async (
  APIURLBuilder: WPAPIURLBuilder,
  posts: WPPost[] = []
): Promise<WPPost[]> => {
  const perPage = 20;

  try {
    // 今回の処理でフェッチした記事一覧
    const url = APIURLBuilder.perPage(perPage).getURL();
    const response = await fetch(url);

    // エラーレスポンスの場合はレスポンスをスローして中断
    if (
      response instanceof Error ||
      (response.data && response.data.status && response.data.status > 399)
    ) {
      throw response;
    }

    // 前回分までとマージする
    const mergedPosts = [...posts, ...response];
    
    // 記事数が perPage 数より少なかったら処理終了
    if (response.length < perPage) {
      return mergedPosts;
    }

    //  ↑で処理が終了しなかったら次のページが存在するということなので次のページへ進む
    APIURLBuilder.nextPage();

    // 再帰の実行
    return listAllPosts(APIURLBuilder, mergedPosts);
  } catch (error) {
    throw error;
  }
};

20件づつ記事を取得して、たとえば15件しか記事がフェッチできなかった場合は次のページが無いので、そこで結果を返します。20件フルにあったならば、APIURLBuilder.nextPage() で API のページを1つ進めます。APIURLBuilder は 「WordPress Rest API の URL を作る JS クラス」をチェックしてください。

タグ一覧の取得も同じ処理で取得できます。

const listAllTags = async (
  APIURLBuilder: WPAPIURLBuilder,
  tags: WPTag[] = []
): Promise<WPTag[]> => {
  const perPage = 20;
  try {
    const url = APIURLBuilder.perPage(20).getURL();
    const response = await fetch(url);

    // エラーレスポンスの場合はレスポンスをスローして中断
    if (
      response instanceof Error ||
      (response.data && response.data.status && response.data.status > 399)
    ) {
      throw response;
    }

    const mergedTags = [...tags, ...response];

    if (response.length < perPage) {
      return mergedTags;
    }

    APIURLBuilder.nextPage();

    return listAllTags(APIURLBuilder, mergedTags);
  } catch (error) {
    throw error;
  }
};

fetchメソッドですが、ネイティブの fetch ではなく、このようなポリフィル関数を利用しています。

import unfetch from "isomorphic-unfetch";

const fetch = async <JSON = any>(
  input: RequestInfo,
  init?: RequestInit
): Promise<JSON> => {
  const res = await unfetch(input, init);
  return res.json();
};

export default fetch;

isomorphic-unfetch はブラウザ環境でも Node.js環境 でも利用できるライブラリです。Axios も両方で使えたはずなので Axios を使ってもいいですね。

上記関数で記事やタグを全件取得することができたので、タグ一覧の表示や、getStaticPaths でのページ生成に利用することができます。