Next.js の JAMStack なサイトで sitemap.xml を SSR で動的生成してたら 500 エラーなった

環境

• Next.js v12 (サイト自体)
  • sitemap.xml ページは SSR
• AWS Amplify (ホスティング)
• microCMS (記事データ管理)

結論

Next.js の SSR は Amplify で Lambda@Edge 上で動いているのだが、Amplify Console 上で指定した環境変数が Lambda@Edge に引き継がれないため、環境変数を参照している箇所でエラーとなる。 回避方法としてはビルド時に .env.local へ出力するスクリプトを用意するか、 next.config.js で env を定義しておくかがある。

• Next.js SSR mode - Environment Variables not being carried over to the created Lambda Functions · Issue #1987 · aws-amplify/amplify-hosting
• Environment variables - AWS Amplify Hosting

背景

Next.jsで動的にXMLサイトマップを生成する を参考に SSR で sitemap.xml を動的生成していたが、/sitemap.xml へのアクセスで 500 エラーが出ていた。

原因

ログを調べると SSR 時に、microCMS にアクセスするときの API KEY が環境変数から取得できておらず、microCMS へのアクセスで 401 エラーとなっていたのが原因だった。