microCMSのSDK + Next.jsでコンテンツを取得する際にクエリを渡して取得件数を調整したりフィルターをかけたりする 📝

f:id:kimizuka:20210818163900p:plain

かつては自前でmicroCMSとNext.jsを組み合わせていましたが、SDKができたとのことだったので、つかってみました。

Nuxt.js用のSDK、GatsbyJS用のSDKとフレームワーク専用で用意されているものもありますが、Next.jsは専用のものが無いので、Javascript（Node.js）用のSDKを使います。

ただ、Next.jsとの連携方法はこちらにまとまっており、基本的にはこちらをそのまま進めていけば連携自体は楽々です。

document.microcms.io

で、この通り進めると、getStaticPropsの部分は、

export const getStaticProps = async () => {
  const data = await client.get({
    endpoint: 'hello',
  });

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

となるのですが、このままだと最大10件までしかコンテンツを取得できません。
なぜならば、limitのデフォルトが10になっているからです。

document.microcms.io

クエリでlimitを変更すれば良い話なのですが、クエリの渡し方を調べてもパッと出てこなかったので、型定義ファイルを読んで解決しました。

github.com

export interface GetRequest {
  endpoint: string;
  contentId?: string;
  queries?: MicroCMSQueries;
}

export interface MicroCMSQueries {
  draftKey?: string;
  limit?: number;
  offset?: number;
  orders?: string;
  fields?: string | string[];
  q?: string;
  depth?: depthNumber;
  ids?: string | string[];
  filters?: string;
}

https://github.com/microcmsio/microcms-js-sdk/blob/main/src/types.ts より引用

となっているので、

export const getStaticProps = async () => {
  const data = await client.get({
    endpoint: 'hello',
    queries: {
      limit: 99 // 追加
    }
  });

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