microCMS と Next.js でブログを作る（SDK 版）

以前、microCMS と Next.js でブログを作るというブログを書いたのですが、microCMS から公式の SDK が提供されていたので書き換えてみました。

前回と比べ、大きく異なる点は以下の 2 点になります。

• microCMS JavaScript SDKを使うため、aspidaは未使用
• Next.js のバージョンを 10 から 11 にアップデート

ここではこれら変更点についてのみ扱います。それほど変わらない点については、前回の記事をご参照ください。microCMS の API はまったく同じものを使用しています。

完成したコードのリポジトリは下記になります。

• https://github.com/hbsnow-sandbox/nextjs-micro-cms-sdk-example

インストール

まずは Next.js をインストールしましょう。TypeScript はコマンド一発で導入できるようになっています。

yarn create next-app --typescript

ESLint / Prettier

Next.js 11 からはデフォルトで ESLint とその設定が含まれています。そのため、ESLint 本体やプラグインなどは個別にインストールする必要はありません。

ただ Prettier は含まれていないため、インストールしておきます。

yarn -DE add prettier eslint-config-prettier

以下が .eslintrc.js になります。extends に prettier を追加したついでに "import/order" で import 順を変更してみました。

// .eslintrc.js
/** @type {import('@typescript-eslint/experimental-utils').TSESLint.Linter.Config} */

const config = {
  extends: ["next", "next/core-web-vitals", "prettier"],
  rules: {
    "import/order": [
      "error",
      {
        groups: ["builtin", "external", "internal"],
        pathGroups: [
          {
            pattern: "react",
            group: "external",
            position: "before",
          },
        ],
        pathGroupsExcludedImportTypes: ["react"],
        "newlines-between": "always",
        alphabetize: {
          order: "asc",
          caseInsensitive: true,
        },
      },
    ],
  },
};

module.exports = config;

• Basic Features: ESLint | Next.js

SDK を使って API にアクセスする

microCMS の管理画面にある API プレビューから、リクエストするためのコードがコピーできるようになっています。

TypeScript の場合には、以下のように型引数にレスポンスの型を指定します。以下はリスト形式の API エンドポイントで、id と title のみをリストで取得するときのコード例になります。

client.get<BlogListResponse>({
  endpoint: "blogs",
  queries: { fields: "id,title" },
});

基本的に、aspida で記述していた箇所を SDK に置き換えていくだけの作業になります。

PreviewData でのエラー

前回のファイルをコピー&ペーストしていき、SDK に置き換えていく作業が完了しても一箇所エラーになる箇所があります。

// src/pages/blogs/[id]/index.tsx
const draftKey = previewData?.draftKey
  ? { draftKey: previewData.draftKey }
  : {};

Next.js 11 のアップデートした影響で、previewData の型が any から PreviewData に変更されたことが原因です。

export type PreviewData = string | false | object | undefined;

そのため User Defined Type Guards で型を制限する必要があります。

// src/utils/isDraft.ts
type Draft = {
  draftKey: string;
};

export const isDraft = (arg: any): arg is Draft => {
  if (!arg?.draftKey) {
    return false;
  }

  return typeof arg.draftKey === "string";
};

これを使って、以下のように書き換えるとエラーを解消できます。

const draftKey = isDraft(previewData) ? { draftKey: previewData.draftKey } : {};

まとめ

SDK を利用するついでに、Next.js のバージョンを上げてみました。

SDK はシンプルなので、aspida を使っている場合には今すぐ乗り換えないと困ることはありませんが、今から利用するのであれば SDK を使うのがよさそうです。