Next.jsヘッドレスCMS構成でNetlifyにデプロイしてみる

概要

Next.js でヘッドレス CMS 構成で開発したアプリケーションを、Netlify に自動デプロイしてみます。

コンテンツ更新経路（やりたい運用）は次のようになります。

1. 通常は高速にビルド済みの静的サイトが表示されている。
2. 運用者（業務部門）が microCMS でニュースを更新すると、Netlify で自動ビルドが走りサイト（ニュースリリース部分）が更新される。
3. 開発者（制作・システム部門）が GitHub にソースを PUSH すると、Netlify で自動ビルドが走りサイト（テンプレート部分や個別ページ部分）が更新される。

準備

Next.js でヘッドレス CMS 構成でアプリケーションを作成しておきます。
環境構築や、簡単なアプリケーションのつくり方は以下を参考にしてみて頂ければと思います。

https://zenn.dev/ttani/articles/wsl2-docker-next-setup
https://zenn.dev/ttani/articles/nextjs-microcms-minimum

ヘッドレス CMS は microCMS を用いますが、contentful 等でも同じだと思います。
本記事では簡単なアプリケーション自体は既に存在することを前提に、GitHub リポジトリ経由でデプロイを行い表示確認をするところまでを行います。

手順

GitHub にリポジトリを用意する

GitHub 上で、Next.js のプロジェクトを管理するリポジトリを用意しておきます。

手元のソースを GitHub にプッシュする

Next.js のプロジェクトフォルダ（package.json 等が入っているフォルダ）を、GitHub リポジトリに接続し、プッシュします。

git init
git remote add origin https://github.com/[Organization Name]/[Repository Name].git
git branch -M main
git push -u origin main

※[Organization Name]、[Repository Name]の部分はリポジトリによります。
※package.json 等が入っているフォルダで実行します。

Netlify 側でリポジトリの取り込み設定を行う

1. Sites-Add new site-Import an existing projectを選択
2. Connect to Git providerでGitHubを選択
   1. この際、対象の組織とリポジトリを聞かれるので、連携したいもののみを選択するようにする。
3. 次のような設定を行う
   1. owner:任意（サイトのオーナーに設定したいものを選択）
   2. branch to deploy:デプロイ対象にしたいブランチを選択（main）
   3. Base Directory:未設定
   4. Build command：next build
   5. Publish Directory：.next
4. Deploy Siteを押下

※実際には独自ドメインの設定が必要になると思います。

Netlify 側で Webhook の設定を行う

1. Netlify のBuild & deploy-Build hooks-Add build hookを選択
2. 以下の設定を実施
   1. Build hook name：任意の名前を設定（例：microCMS Hook）
   2. Branch to Build：Hook をトリガにビルドするブランチを設定（main)
3. URL が表示されるのでコピーしておく

microCMS 側で Webhook の設定を行う

1. API設定-Webhookを選択する。
2. 追加を押下しNetlifyを選択する。
3. 以下の設定を実施
   1. 識別名：任意の名前を設定（例：ニュース更新）
   2. URL：先ほど取得した URL を設定
   3. 通知タイミングの設定
      1. コンテンツの公開時・更新時：すべて選択
      2. コンテンツの非公開時：すべて選択
      3. 公開中コンテンツの削除時：すべて選択

以上で、GitHub プッシュまたは、ヘッドレス CMS 側でコンテンツを更新すると、Netlify で自動ビルドが走り、５分くらいで公開サイトに反映されます。

所感

• 更新後即時反映したいとか、すごく頻繁に更新したいとか、機能を作りこみたいといったところがそこまでなければ、画面の動き自体は、静的ホスティング＋ Next.js(Client-Side Navigation：画面リロードせずに遷移する技術)で表示もサクサク快適なので、小規模なコーポレートサイトやランディングページには良い感じですね。