Next.js + MicroCMSでvercelにデプロイするときは環境変数設定を忘れずに

MicroCMSの公式ブログにも書かれていることなので、書くほどでもないとは思いましたが……
ハマった初心者がここにいるので残しておこうと思います。

現在、エビスコムさんの「作って学ぶ Next.js/React Webサイト構築」を参考にポートフォリオを作成しています。

外組みだけ出来たので一度 vercel にデプロイしてみようとしたらエラーでハマってしまいました。

エラー内容はこちら。

[15:38:28.363] Error: parameter is required (check serviceDomain and apiKey)
[15:38:28.365]     at exports.createClient (/vercel/path0/node_modules/microcms-js-sdk/dist/cjs/microcms-js-sdk.js:1:2411)
[15:38:28.365]     at Object.5482 (/vercel/path0/.next/server/chunks/482.js:18:77)
[15:38:28.365]     at __webpack_require__ (/vercel/path0/.next/server/webpack-runtime.js:25:42)
[15:38:28.366]     at /vercel/path0/.next/server/pages/blog/[slug].js:312:65
[15:38:28.366]     at Function.__webpack_require__.a (/vercel/path0/.next/server/webpack-runtime.js:89:13)
[15:38:28.369]     at Object.8387 (/vercel/path0/.next/server/pages/blog/[slug].js:305:21)
[15:38:28.369]     at __webpack_require__ (/vercel/path0/.next/server/webpack-runtime.js:25:42)
[15:38:28.370]     at __webpack_exec__ (/vercel/path0/.next/server/pages/blog/[slug].js:747:39)
[15:38:28.370]     at /vercel/path0/.next/server/pages/blog/[slug].js:748:102
[15:38:28.371]     at Function.__webpack_require__.X (/vercel/path0/.next/server/webpack-runtime.js:177:21)
[15:38:28.371] 
[15:38:28.371] > Build error occurred
[15:38:28.382] Error: Failed to collect page data for /blog/[slug]
[15:38:28.383]     at /vercel/path0/node_modules/next/dist/build/utils.js:963:15
[15:38:28.383]     at processTicksAndRejections (node:internal/process/task_queues:96:5) {
[15:38:28.384]   type: 'Error'
[15:38:28.384] }
[15:38:28.458] error Command failed with exit code 1.
[15:38:28.458] info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
[15:38:28.477] Error: Command "yarn run build" exited with 1
[15:38:28.736] BUILD_FAILED: Command "yarn run build" exited with 1

一行目で「パラメーターが必要です。serviceDomain と apiKey を確認して」と言っています。
serviceDomain と apiKey は MicroCMS と連携するために設定している環境変数です。

冷静に考えると環境変数が設定されていないことがすぐにわかります。
しかし、ローカル環境ではビルドが成功してしまうということが初心者の私としては罠でした。
ローカルでビルドできるならvercelでもそのままビルドできるはず。vercelに原因があると思い込んでしまったんですね。

今思ってみれば、この本、ローカル環境のみでデプロイ方法まで書いていませんでした。
Settings → Environment Variables から設定すれば何の問題もなくデプロイ成功しました。

公式ブログのマニュアルを読めば普通に書いてあることです……

以上。