NextJS：[dot]env.local 返回未定义答案

【问题标题】：NextJS: [dot]env.local returns undefinedNextJS：[dot]env.local 返回未定义
【发布时间】：2021-07-09 11:00:11
【问题描述】：

在我的应用程序中，我在 .env.local 文件中创建了一个环境变量，并通过 process.env.ENV_KEY 将其获取到组件中。但它不是返回实际值，而是返回未定义的值。

.env.local
API_ENDPOINT = "http://localhost:4200/api/"

在组件中，我得到的值为process.env.API_ENDPOINT，但它返回为undefined

App.js
function App(props) {
    const loginUser = async event => {
    event.preventDefault()
    axios.post(`${process.env.API_ENDPOINT}/login`, data)
    .then((response) => {
      router.push('/')
    })
  } 
}

我也尝试配置到 env.js 文件中，但也没有任何效果。

exports.env = {
  API_ENDPOINT: process.env.API_ENDPOINT
}

And into component have imported as 
import {env} from './config.js'
function App(props) {
    const loginUser = async event => {
    event.preventDefault()
    axios.post(`${env.API_ENDPOINT}/login`, data)
    .then((response) => {
      router.push('/')
    })
  } 
}

此外，我还尝试创建一个构建，然后运行该项目，但它也返回 undefined 值。

我检查的参考

【问题讨论】：

标签： reactjs environment-variables next.js

【解决方案1】：

默认情况下，通过 .env.local 加载的所有环境变量都是仅在 Node.js 环境中可用，这意味着它们不会暴露给浏览器。为了向浏览器公开变量您必须在变量前面加上 NEXT_PUBLIC_ ：

所以改变

API_ENDPOINT = "http://localhost:4200/api/"

到

NEXT_PUBLIC_API_ENDPOINT = "http://localhost:4200/api/"

和

axios.post(`${process.env.API_ENDPOINT}/login`, data)

到

axios.post(`${process.env.NEXT_PUBLIC_API_ENDPOINT }/login`, data)

【讨论】：