Next.js × microCMSで記事を全件取得する

Next.js × microCMSで記事を全件取得する方法です。
microCMSのデフォルトでは10件までしか記事を取得することができません。

記事の取得数を指定するメソッドの作成

GETメソッドの引数の中にlimitを設定します。以下では100件取得できるようにしています。
件数の上限値はないようですが、公式サイトによるとレスポンスサイズが5MBを超えるとエラーになるようです。
libs/client.js

import { createClient } from 'microcms-js-sdk';

export const client = createClient({
    serviceDomain: process.env.NEXT_PUBLIC_SERVICE_DOMAIN,
    apiKey: process.env.NEXT_PUBLIC_API_KEY,
});

export const getAllContents = async (limit = 100, offset = 0) => {
    const data = await client.get({
        endpoint: 'blog',
        queries: {
            offset,
            limit,
        },
    });

    return data.contents;
};

作成したメソッドを適用

上記で作成したメソッドを一覧画面と、記事詳細画面で使用します。
index.tsx

〜省略
export const getStaticProps = async () => {
    const contents = await getAllContents();

    return {
        props: {
            blog: contents,
        },
    };
};

blog/[id].tsx

〜省略
export const getStaticPaths = async () => {
    const contents = await getAllContents();

    const paths = contents.map((content: { id: string }) => `/blog/${content.id}`);
    return { paths, fallback: false };
};

export const getStaticProps = async (context: { params: { id: string } }) => {
    const id = context.params.id;
    const data = await client.get({ endpoint: 'blog', contentId: id });

    return {
        props: {
            blog: data,
        },
    };
};

参考資料

リスト形式のAPIでGET APIから10件しかコンテンツを取得できません
【2023】microCMSでAPI GET request数が10件だったのを100件に変更した