Next.js x Cloudflare x microCMS で さくっとJamstack
はじめに
2022 年 11 月号の Software Designで特集されてた Jamstack の記事がとってもわかりやすかったので、完全に理解しちゃいました。
その後、フレームワークを Next.js に置き換えて試したことを、Next.js x Cloudflare で さくっと Jamstackって記事にまとめました。
今回、前回の記事に加えて、Jamstack でよく使われるヘッドレス CMS も組み合わせてデプロイするところまで試してみたので、それについてまとめます。たくさんあるヘッドレス CMS の中で、日本製でそこそこ有名そうな microCMS を使ってみました。
特に、microCMS の設定、Next.js と microCMS との連携方法、microCMS と Cloudflare の連携方法を中心に記載しようと思います。
試す際、microCMS のブログ記事（microCMS + Next.js で Jamstack ブログを作ってみよう | microCMS ブログ）を非常に参考にさせてもらいました。microCMS の記事では、デプロイに Vercel (Next.js を作っている会社のサービス)を使っていますが、本投稿では、Cloudflare に置き換えて試してます。microCMS は日本語情報が充実してるので安心感ありますね。
microCMS の設定
まず、microCMS ブログを参考に API を作ります。本投稿では省略します。
API を作ったら、ブラウザ上から動作確認もできますが、Thunder Clientでも確認してみました。ヘッダーに API キーだけ設定したら、すんなり動きました。
ビルド時にアクセス API だからと言って、特別なことはしてなさそうです。ビルド時にアクセスする部分は、microCMS JavaScript SDKとビルドがいい感じにしてくれてそうです。
ちなみに、microCMS 上で API フィールドの種類をリッチエディタにすると画像の埋め込みも可能です。その場合、画像は別の URL に置かれて、誰でも認証認可なしでアクセスすることができるので、注意が必要です。
次では、API を作ってコンテンツを入れるところまで完了している前提で進めます。
Next.js と microCMS の連携
次に、Next.js と microCMS を連携させます。
microCMS ブログを参考に、microCMS の SDK を使って Next.js から microCMS の API にアクセスします。
ここで、.env.development.localファイルのAPI_KEYとlibs/client.jsファイルのservice-domain部分を変更しておきます。service-domainには、.microcms.ioの前のサービス ID が入ります。下図の赤枠部分に記載があります。
期待通り動くと、下図のようなページにアクセスできます。CSS 設定してないので地味すぎますが。。。
これで、ブログっぽい機能ができてきてます。
microCMS と Cloudflare の連携
最後に、microCMS と Cloudflare を連携します。
まず、Cloudflare 側で、デプロイを開始するためのウェブフックの入り口を追加します。
次に、microCMS 側でコンテンツを修正した時に webhook を飛ばすように設定します。Cloudflare を選択することで、サクッと連携できます。
登録できたら、コンテンツを追加して、デプロイが走ることを確認します。
特に問題なければ、動くはずです。
おわりに
連携はとっても楽にできるので、全体的にあっさりな説明になっちゃいました。
ヘッドレス CMS である microCMS を使ってビルド時にコンテンツを埋め込む方法を体験して、Jamstack らしい動きをサクッと確認することができたので満足しました。
microCMS は他にも色々できそうなので、今後もっと触ってみたいなーと思います。
Discussion