何について書く？

• Next.jsにおける環境変数の設定方法を2つ紹介
  • Next.js標準機能
  • Amplifyに設定してデプロイ時、適用する方法

内容

前提:Node.jsで動くPJファイルの環境変数はprocess.envオブジェクトに格納される

• Next.js標準機能（Next.jsバージョン9.4以降）
  PJファイル内に下記ファイルを作成することで、次の３種類の環境に合わせた 環境変数がprocess.envにセットされる。[environment]= development(ローカル開発環境),production(本番環境),test(テストコード実行環境)　※ステージング環境は未対応。
  .env : 全ての環境に対する環境変数
  .env.local : ローカル用環境変数。全ての環境の環境変数を上書き。
  .env.[environment] : 特定の環境に対する環境変数。
  .env.[environment].local: 特定環境のローカル用環境変数。特定の環境に対する環境変数を上書き。
  .envファイルにて環境変数を定義するとき、環境変数名先頭にNEXT_PUBLIC_をつければサーバー側・クライアント側共に公開され、つけなければサーバー側のみに公開される。
• Amplifyに設定してビルド時、適用する方法
  Amplifyで環境変数を定義する→AWS Consoleで環境変数を選択
  
  上記図の場合(LogRocketの環境変数を設定するのに活用しました。)
  ビルド設定で、echo "NEXT_PUBLIC_LOGROCKET_ID=$LOGROCKET_ID" >> .envと記載していれば
  アプリ側からprocess.env.NEXT_PUBLIC_LOGROCKET_IDでビルドされた環境ごとに任意の環境変数を受け取ることができる。

今回は、ステージングと本番環境の環境変数切り分けがやりたかったため、後者の方法を選択した。
今後dotenvなど環境変数管理のモジュールにも触れていきたい。

参考サイト

https://nextjs.org/docs/basic-features/environment-variables
https://mlog.wlaboratory.com/entry/category/tools/next-js/next-js-env-usage
https://qiita.com/YukiOnishi/items/2fcda5a350bd3655e676
https://www.wakuwakubank.com/posts/662-nodejs-env/
https://qiita.com/duplicate1984/items/6f506c724ee519ce4e4c

（更新①）LogRocket環境設定方法に誤りを発見。以降詳細を記載。

• AWS Amplify consoleによる環境変数設定の際、重要な点がある。
  

結論→Value欄に文字列を記載する時、シングルクォートを含めてはいけない。

• 今まで環境変数設定の際、Value欄のLogRocketトラッキングID（zhteno/プロジェクト名）を記載する時シングルクォートで囲ってしまっていた。そのような誤りをしていた理由は、.envファイルを作成して手作業で環境変数設定の際にはNEXT_PUBLIC_LOGROCKET_ID='zhteno/プロジェクト名'と記載するから。
• しかしこのAWS Amplify consoleの環境変数設定欄のValue欄に'zhteno/プロジェクト名'と入力してしまうと、ビルド時echo "NEXT_PUBLIC_LOGROCKET_ID=$NEXT_PUBLIC_LOGROCKET_ID（右辺がAWS Amplify consolでしていた値）" >> .envによって作られた.envファイルに自動に書き込まれる内容が、NEXT_PUBLIC_LOGROCKET_ID="'zhteno/プロジェクト名'"というように意図しないシングルクォート付きの文字列となってしまう。
• AWS Amplify consolで文字列の環境変数を設定するときは、シングルクォートを書かないようにする！
• 参考：console.log（環境変数）とエラー画面は下記

解決前	解決後