microCMSとNext.jsでブログ作ってみた(SDK)
本サイトをNext.js x microcmsで作ったが、そのあとmicrocmsからSDKが公開されたとのことで、そちらに対応してみた。
基本的にはこちらの記事を参考に進めていった。
Next.jsのアップデート
各パッケージをアップデートする際以下のようにした。
- 最新のNext.js12系でnext appを作成
- 作成したpackage.jsonを元のプロジェクトに移し、必要なものだけ再度追加
既存のpackage.jsonを変更したも良かったのだが、以下の理由から一度まっさらにしてから追加しようと思った。
まあ個人のプロジェクトなので。
- Next11系からEslintがESLint設定がデフォルトでサポートされた
- 初期構築時にで試しで色々追加したものを整理したい
- aspida廃止してsdkのclientを使う
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 日本語翻訳プロジェクト - プレビューモード
やったこと
- page/api配下にプレビュー用API配置して、microcmsからプレビューデータを取得できるようにする
- 取得したpreviewデータをblogsページで表示できるようにする
- setPreviewDataで表示する方式はCookieのサイズ制限(2KB)があったのでやめた
ハマリポイント
コンパイラ変更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はコメントアウトして解決した。
以上で作業完了！