Amplify + Next.jsでサーバーサイドの変数読み込みをさせる

先に結論

↓にあるようにbuildコマンドで.envファイルに変数読み込ませる！
https://docs.aws.amazon.com/ja_jp/amplify/latest/userguide/ssr-environment-variables.html

・・・
    build:
      commands:
      # アプリによっては.env.production
        - env | grep -e API_BASE_URL >> .env
        # NEXT_PUBLIC_ 系はクライアント側に必要なものをまとめて出力
        - env | grep -e NEXT_PUBLIC_ >> .env
        - npm run build
・・・

なぜその必要があるのか

Amplifyの環境変数はビルド用だから。
Amplify の環境変数は「ビルド環境に入る」だけなので、そのままだと Next.js の .env を使う仕組みと噛み合わない。

そこでビルド前に .env に書き出すことで、Next.js 側が正しく読み込めるようにするのだ🦆🦆