microCMS の更新を Webhook で Vercel に反映させる

Next.js + Vercel + microCMS でブログを構築すると、記事を更新しても本番サイトがなかなか反映されなかった。原因は、Vercel 側が一度生成したページをキャッシュし続けるためらしい。ISR（Incremental Static Regeneration）やキャッシュが効いているから、とのこと。

ローカルではリアルタイムで microCMS の変更が反映されるのに、本番では反映されない…という現象が発生していたので対応する。

解決策

• 1. revalidate を使う
  • Next.js App Router で fetch() を使っている場合、page.tsx に書けばいいらしい
  • 数十秒〜数分の遅延で自動再生成（高速・簡単）
• 2. Vercel の Webhook で手動再ビルド
  • Vercel の「Deploy Hooks」から Webhook URL を発行
  • microCMS の「Webhook」機能で記事更新時に Vercel のビルドをトリガー
  • 記事が更新されると Vercel が自動で再ビルドされ、内容が反映される

更新頻度は低いので、Webhook を使う。

1. Vercelで Deploy Hook を作成

1. Vercel ダッシュボード で対象プロジェクトを選択
2. 左サイドバー「Settings」→「Git」→下の方にある “Deploy Hooks” を開く
3. 入力欄に以下を設定し、「Create Hook」ボタンを押す
   • Name: microcms-publish（任意）
   • Git Branch: main

4. 作成すると、Webhook URL（例：https://api.vercel.com/v1/integrations/deploy/...）が表示されるので、コピーしておく

2. microCMS で Webhook を設定

1. microCMS 管理画面 にログイン
2. 該当サービス → 左メニュー「API設定」→ 「Webhook」タブを開く
3. 「Webhookを追加」をクリック
4. 設定内容を以下にして、作成する

動作確認

• microCMS でブログ記事を「公開」または「更新」
• 数秒後、Vercel の Deployments に新しいデプロイが表示される
• 本番環境に反映

これで、リアルタイムで記事更新が反映されるようになった。