microCMSとNext.jsでブログ作ってみた(SDK)

thumbnail

本サイトをNext.js x microcmsで作ったが、そのあとmicrocmsからSDKが公開されたとのことで、そちらに対応してみた。
基本的にはこちらの記事を参考に進めていった。

Next.jsのアップデート

各パッケージをアップデートする際以下のようにした。

  • 最新のNext.js12系でnext appを作成
  • 作成したpackage.jsonを元のプロジェクトに移し、必要なものだけ再度追加


既存のpackage.jsonを変更したも良かったのだが、以下の理由から一度まっさらにしてから追加しようと思った。
まあ個人のプロジェクトなので。


microCMS API Clientの変更

aspidaを使ってmicocmsにアクセスしていたのをsdkが提供しているclientに変更する。
API部分を置き換えていく作業。

# before
const blogListPromise = client.v1.blogs.$get()

# after
const blogListPromise = client.getList<BlogListResponse>({
  endpoint: "blogs",
})


ぶっちゃけ、見た目としても安全性もaspidaのほうがいい気がする...

  • aspida: clientに各API専用のフィールドが生える方式
  • sdk: get, getList, getDetail, getObjectに対して各APIのレスポンス型をパラメータとして渡す方式


ついでにプレビュー機能も実装

[Next.js+Vercel+microCMS] microCMS と Next.js でブログを作る - プレビューの作成
Next.js 日本語翻訳プロジェクト - プレビューモード

やったこと


ハマリポイント

コンパイラ変更webpack→swc

Rust製のコンパイラがデフォルト?になった
これについては設定ファイルを変更すると有効になった

  • .babelrcを削除
  • next.config.jsを追加し以下設定
// next.config.js

module.exports = {
  swcMinify: true
}


PreviewDataの型変更

今回新規でプレビュー機能を実装したので特に困ったわけではないが、previewDataの型がanyから以下に変更になったとのこと。

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


LinterとVSCodeのPrettier

微妙に困ったのは、プロジェクトで設定したeslint/prettierとVSCodeで元々設定していたimport順についての設定が競合して無限にエラーとなったこと。

# .setting.json  
"editor.codeActionsOnSave": {
    "source.organizeImports": true,   // <------------- これ
    "source.fixAll.eslint": true
  },


ファイル更新 -> プロジェクトのprettier実行 -> VSCodeのprettier実行 -> プロジェクトのeslintに怒られる
という状況。prettierの方法が異なるので発生していると思われる。
はじめはVSCode側のprettierが動いてることに気が付かず、プロジェクトの設定を色々変更して時間を費やしてしまった。
最終的に"source.organizeImports": trueはコメントアウトして解決した。

以上で作業完了!