microCMSをNext.jsと接続する

ターミナルでmicroCMS CDKをインストール

yarn add microcms-js-sdk

APIキーの設定

.env.local

MICROCMS_API_URL=XXX
MICROCMS_API_KEY=XXX

src/libs/client.ts

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

export const client = createClient({
  serviceDomain: process.env.MICROCMS_API_URL || '',
  apiKey: process.env.MICROCMS_API_KEY || '',
});

実際にSSRで読み込む

pages/index.tsx

import { client } from '../src/libs/client';

export const getStaticProps = async () => {
  const microCMSData = await client.get({
    endpoint: 'endpoint名',
    // queries: {
    //   offset: 0,
    //   limit: 100,
    // },
  });

  return {
    props: {
      data: microCMSData.contents,
    },
  };
};

ついでに型定義ファイルを作る

src/types/example.ts

export type Example = {
	// microCMSのデータとか引っ張ってくる時のため
	// endpointごとにつくる
  createdAt: string;
  updatedAt: string;
  publishedAt: string;
  revisedAt: string;
};