Next.jsで環境変数を読み込むのに手間取ったので備忘録。
環境変数名にNEXT_PUBLIC_をつけているか
環境変数をクライアントサイド（ブラウザ）で使用する場合、変数名ににNEXT_PUBLIC_とつける必要があります。
サーバー側（Node.js環境）で使用する場合には、NEXT_PUBLIC_とつけなくても問題ありません。
// 例
NEXT_PUBLIC_SERVICE_NAME=Serviceenvファイル名と起動コマンドは合っているか
Next.jsでは、yarn dev 実行時に .env.development が読み込まれ、yarn start/yarn build 実行時に .env.production が読み込まれます。
また、.env.local は常に読み込まれ、同じ変数があった場合は.env.localのものが優先されます。
envファイルの位置は正しいか
各ファイルはルートに配置する必要があります。
環境変数に格納したい値はNext.jsのビルド時に存在するか
クラウドの環境変数をNext.js内で使用したいときの話です。
基本的にNext.jsはビルド時に環境変数を割り当てているようです。そのため、ビルド時に適用させたい環境変数が参照できないと、undefinedが格納されます。
ビルド時に値が参照できない場合は、ランタイム設定を行うとよいかもしれません。ビルド時ではなくランタイム（実行時）の値を読み取ることができるものです。
ランタイム設定が気になる方はこちらへ。
