reactjs - Next.js 中的 .env.local 文件设置不正确

Question

当我在我的项目根目录中创建一个 .env.local 文件时，它没有正确设置。

在文件中，我有这样的 API key

API_KEY=SOME_API_KEY

然后，当我尝试在 getServerSideProps 中使用 process.env.API_KEY 访问它时，它不起作用。当我 console.log(process.env.API_KEY) 我得到 undefiend。我认为这是因为文件设置不正确？

我什至尝试安装 dotenv，但我知道 Next.js 不需要它。

下一个配置文件

module.exports = {
  reactStrictMode: true,
}

Answer 1

您会注意到浏览器将记录 undefined。发生这种情况是因为到目前为止环境变量仅在我们的服务器上定义。

从 Next.js 9.4 开始，Next.js 将使所有以 NEXT_PUBLIC_ 开头的环境变量都可供客户端使用，无需任何进一步配置!

1. 创建.env(所有环境)、.env.development(开发环境)、.env.production(生产环境)、.env.local(本地环境)

2. 将前缀 NEXT_PUBLIC_ 添加到您的所有环境变量。

    NEXT_PUBLIC_BASE_URL=http://localhost:3000/
   

3. 使用前缀process.env

    process.env.NEXT_PUBLIC_BASE_URL
   

4. 停止并重新启动服务器:

   npm run dev
   
   OR 
   
   yarn dev