はじめに
Nextjsを使っていて調べてもなかなか解決までいかないことがあったので記事にしていきます
問題
Nextjsで.envから環境変数を読み込もうとしてルートディレクトリに.envファイルを作り以下の内容を書きました
.env
API_PROXY=https://www.hoge.jp
そして環境変数API_PROXYを読み込み表示します
index.tsx
cosole.log(process.env.API_PROXY)
しかしなぜかundefinedになり読み込みができませんでした
解決方法
ランタイムをnodeにしていたので環境変数の先頭にNEXT_PUBLIC_をつける必要がありました
.env
NEXT_PUBLIC_API_PROXY=https://www.hoge.jp
console.log(process.env.NEXT_PUBLIC_API_PROXY)
これはクライアントでフロントを使うときには必要なのでuse clientしていたので読み込めなかったような気がしています
おわりに
知らなかった。。
この情報があまりネットにはなかったのですが、デフォルトでnextjsを作成して使っているのでハマる人多いのではないかとおもいました
参考