問題
クライアントサイドで、環境変数を読み取ろうとしたが取得できなかった...。
console.logで呼び出してもundifindになって取得できませんでした。
解決策
Non-NEXT_PUBLIC_ environment variables are only available in the Node.js environment, meaning they aren't accessible to the browser (the client runs in a different environment).
In order to make the value of an environment variable accessible in the browser, Next.js can "inline" a value, at build time, into the js bundle that is delivered to the client, replacing all references to process.env.[variable] with a hard-coded value. To tell it to do this, you just have to prefix the variable with NEXT_PUBLIC_
公式のドキュメントにはこのように書かれていました。
クライアントサイドから環境変数にアクセスするときはNEXT_PUBLIC_を変数名につける必要があるそうです。
例えば
- DB_HOST=localhost
+ NEXT_PUBLIC_DB_HOST=localhost