0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

問題

クライアントサイドで、環境変数を読み取ろうとしたが取得できなかった...。
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
0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?