環境變量在 React 的前端未定義

Question

我正在嘗試將所有敏感變量移動到 .env 文件。 它在 Node 上的服務器端工作得很好，但我在使用 React 時遇到了麻煩。

我參考了這些答案：這個和那個

1.我改變了 my.env 所以它看起來像這樣

REACT_APP_SIGNER_PK = xxxxxx-xxxxx-xxxxxx

將變量本身添加到包含腳本的文件中

const REACT_APP_SIGNER_PK = process.env.REACT_APP_SIGNER_PK;

2. Placed.env 在我的根文件夾中
3. 我在yarn run dev更改后重新啟動服務器

為了測試更改，我將這個打印語句從我放置 env 變量的文件中放入

console.log(REACT_APP_SIGNER_PK);

在本地服務器重新啟動時，我檢查控制台並在服務器運行的終端中看到帶有環境變量的打印語句，但在瀏覽器控制台中我看到此打印為undefined

我的操作與參考資料唯一不同的是我使用yarn run而不是npm start

我做錯什么了？

Answer 1

感謝@OFRBG 的評論，我設法找到了解決方案。

將REACT_APP_ app 添加到 my.env 變量不起作用，因為我使用的是 nextJS 而不是 Create-React-App。

為了解決nextJS 用戶的這個問題，添加NEXT_PUBLIC_而不是 your.env 變量的前綴