環境変数が読み込めない【Next.js】

問題

Next.jsを用いたプロジェクト内で以下のように環境変数を参照しようとしても参照できない(特にエラーメッセージなし)

.env

VAL=sample

// 環境変数VALを表示
console.log(process.env.VAL);

解決方法

変数名をNEXT_PUBLIC_~としていないのが原因でした。

VALをNEXT_PUBLIC_VALと変更すると解決できました。

詳細はこちら

.env

NEXT_PUBLIC_VAL=sample

// 環境変数VALを表示
console.log(process.env.NEXT_PUBLIC_VAL);