microcms_service_domain is requiredエラーに苦戦した話

はじめに

こんにちは。フルスタック株式会社です。

最近、Next.jsとmicroCMSを組み合わせて新しいウェブサイトを開発し、そのサイトをAmplifyでデプロイする過程でいくつかの課題に直面しました。

環境

• Next.js13：Next.jsはReactベースのフレームワーク。
• microCMS：microCMSは柔軟でAPIベースのCMS。RESTful API、ヘッドレスCMSで、多言語対応。
• AWS Amplify：モダンなウェブアプリ構築のためのフルスタックプラットフォーム。

エラー内容と結論

Amplifyデプロイ時に、「Error: microcms_service_domain is required」というエラーに苦戦。解決策は「NEXT_PUBLIC_」を環境変数に追加することでした。本記事では、このような環境変数の設定で陥ったエラーと対応について記述しています。

問題起因

サイトがAmplifyにデプロイされると、microCMSの記事へのリンクが機能しなくなりました。ローカルサーバーでは問題なく動作していたダイナミックルーティングのページで、「Application error: a server-side exception has occurred」というエラーが発生。

コンソールに「Error: Page "/business/[slug]" is missing "generateStaticParams()"」というエラーがあったので、generateStaticParamsのコードの追加してみる。

export async function generateStaticParams() {
  const posts = await getBusinessList();

  return posts.contents.map((post: { id: string }) => ({
    slug: post.id,
  }))
}

gitにコミットし、再デプロイ。しかし、エラー解決できず…

CloudWatchでログを確認すると、「Error: microcms_service_domain is required」というエラーが見つかりました。Amplifyの環境変数は設定されているはずなのに、なぜ発生するのか…

エラー解決

様々な試行錯誤の末、最終的にenvファイルの環境変数名に「NEXT_PUBLIC_」をつけていなかったことが原因であることが判明。この単純な見落としで生じたAmplify上のエラーに対処する過程を、開発者仲間に共有し、同様の問題に対処する手助けとなればと思います。