為什么解構 next.js 環境變量會導致未定義？

Question

我在解構值時使用 api_key 創建了一個 .env 文件

const { api_key } = process.env; // = undefined
const key = process.env.api_key; // = value

有人可以幫忙解釋一下嗎？

Answer 1

從文檔：

注意：為了保證僅服務器機密的安全，Next.js 在構建時將process.env.*替換為正確的值。 這意味着process.env不是標准的 JavaScript object，因此您無法使用 object 解構。

對於客戶端 React 組件

由於NEXT_PUBLIC_前綴，該值將內聯到發送到瀏覽器的 JavaScript 中。 這種內聯發生在構建時，因此需要在構建項目時設置各種NEXT_PUBLIC_ envs。