はじめに

Next.jsとヘッドレスCMS（microCMS）で構築したサイトをVercelで運用する際、多くの人が直面する一つの課題があります。それは、「microCMSで記事を更新しても、Vercel上のサイトには自動で反映されない」という問題です。

Vercelの自動デプロイは、あくまでGitリポジトリへのプッシュをきっかけに動作します。
そのため、コンテンツを更新するたびに手動で再デプロイをかけるのは、手間がかかります。

しかし、ご安心ください。Vercelの「Deploy Hooks」とmicroCMSの「Webhook」という2つの機能を連携させることで、このプロセスを驚くほど簡単に、そして完全に自動化できます。

仕組みの概要

構築する流れは非常にシンプルです。

1. microCMSで記事を「公開」または「更新」する。
2. それをきっかけに、microCMSが特定のURL（VercelのDeploy Hook）へ通知を送る。
3. 通知を受け取ったVercelが、自動でサイトの再デプロイを開始する。

この設定により、コンテンツの変更が常に最新の状態でサイトに反映されるようになります。

設定は簡単、2ステップ

ステップ1：VercelでDeploy HookのURLを取得する

まず、Vercel側に、再デプロイを命令するための「特別なURL」を発行してもらいます。

1. Vercelのプロジェクトダッシュボードから「Settings」→「Git」と進みます。
2. 「Deploy Hooks」の項目で、フックの名前（例：microCMS-update）とデプロイ対象のブランチ（通常はmain）を指定し、フックを作成します。
3. 生成されたURLをコピーしておきます。

ステップ2：microCMSのWebhookにURLを設定する

次に、microCMS側で「記事を更新したら、先ほどのURLに通知を送る」という設定を行います。

1. microCMSの管理画面で、対象のAPI（例：ブログ）の「API設定」→「Webhook」を開きます。
2. 「追加」ボタンを押し、先ほどVercelでコピーしたURLを貼り付けます。
3. 通知のタイミングは「公開」「変更」「非公開」にチェックを入れると、あらゆるコンテンツの変更に対応できるのでおすすめです。

まとめ

たったこれだけの設定で、microCMSでのコンテンツ更新がVercelのデプロイに直結し、手動での作業から解放されます。

記事の執筆や編集といった、本来集中すべきクリエイティブな作業に時間を使うためにも、この自動化の仕組みはぜひ導入しておくべきでしょう。