背景
Next.jsで開発をしていて、.env.developmentに定義した環境変数がundefinedになった。
その備忘録。
やること
.env.developmentに定義した環境変数を呼び出す。
クライアントサイド（ブラウザ）で確認する場合は環境変数にNEXT_PUBLIC_をつける
クライアントサイド、つまりブラウザで動作するJavaScriptコード内で環境変数を使用する場合、環境変数名の先頭にNEXT_PUBLIC_を付ける必要がある。
これは、ブラウザ側のJavaScriptが実行時に環境変数にアクセスする際、Next.jsがセキュリティ上の理由からどの変数が公開されていいかを識別するためである。
例:
NEXT_PUBLIC_API=YOUR_API
この例では、NEXT_PUBLIC_APIという環境変数はブラウザ側のスクリプトで利用可能となる。
ちなみにその環境変数の呼び出しは、
`/hoge?api_key=${process.env.NEXT_PUBLIC_API}`
でできる。
起動コマンド
開発環境では、yarn dev コマンドを使用してアプリケーションを起動。このコマンドが実行されると、Next.jsは自動的に .env.development ファイルを読み込む。このファイルには開発環境特有の環境変数が含まれているべき。
一方、本番環境でのアプリケーションのビルドや起動には、yarn build と yarn start コマンドが使われる。これらのコマンドが実行される際には、.env.production ファイルが読み込まれる。このファイルには本番環境で使用される環境変数を設定。
N.env.local ファイルについても触れておく。このファイルは、開発環境でも本番環境でも常に読み込まれる。もし同じ環境変数名が .env.development や .env.production にも存在する場合、.env.local の値が優先される。これにより、個々の開発者がローカル環境で特定の設定を上書きすることができる。
envファイルの位置
各envファイルはルートに配置する必要がある。
ビルド時の環境変数
Next.jsでは、ビルドプロセス（yarn build などのコマンド実行時）中に環境変数をアプリケーションに割り当てる。この時点で利用可能な環境変数は、ビルドされたアプリケーション内に組み込まれ、その後の実行中に使用される。しかし、ビルド時に利用可能でない環境変数は、undefined として扱われる可能性がある。
これは特に、ビルドプロセスがクラウド環境で実行される場合に注意が必要。クラウド環境の設定変更がビルド時に間に合わない場合、予期しない挙動が発生することがある。
ランタイム時の環境変数
ビルド時に利用できない環境変数に依存する場合、ランタイム設定を利用することが望ましい。
ランタイム設定とは、アプリケーションが実行される際（ランタイム）に、その時点での環境変数の値を読み込むことを指す。これにより、アプリケーションは実行時に最新の環境設定を反映することができ、動的な設定変更に柔軟に対応することが可能になる。
ランタイム設定についてはこちらへ。
お疲れ様でした。
わからないところ、間違っているところ、もっといい方法がある場合は、コメントでもDMでも教えてください。