Amplify HostingでNext.jsのサーバーサイドから環境変数が読み込めない

この記事に書いてあること

Amplify HostingでNext.jsのサーバーサイドから読み込む環境変数を設定したい場合はビルドコマンドで.envファイルに明示的に書き込む必要があります。

起きた問題

Next.jsでサーバーサイドの環境変数の値により表示を切り替えるロジックを実装しました。
Amplify Hostingのアプリの設定>環境変数から値を設定したのですが、アプリからは読み込めないという問題が発生しました。

考えたこと

Next.jsアプリでブラウザから環境変数を読み込む場合はNEXT_PUBLIC_というprefixをつける必要があります。
しかし今回はサーバーサイドなので、これは原因ではありませんでした。

Bundling Environment Variables for the Browser

解決策

Amplifyのビルドコマンドで.envに当該環境変数を書き込む必要がありました。
どうやらAmplifyの設定で入力した環境変数はあくまでビルド時に用いられるもので、SSRアプリの実行時には自動でロードされないようです。
そのため、amplify.ymlにて明示的に設定することが必要です。

// 抜粋
version: 1
applications:
  - frontend:
      phases:
        preBuild:
          commands:
            - npm ci
        build:
          commands:
            - env | grep -e FOO >> .env
            - npm run build
      artifacts:
        baseDirectory: .next
        files:
          - '**/*'
      cache:
        paths:
          - node_modules/**/*

おわりに

ぜんぶドキュメントに書いていました。

環境変数をサーバーサイドランタイムからアクセスできるようにします。

恐ろしいことに、ビルドコマンドにはすでに別の環境変数を追加する処理が書かれていました。
つまり同じ原因で2回引っかかっていたことになります。
3度目が起きないように戒めとしてこの記事を残しておきます。