Next.js 中的 .env.local 文件未正确设置

Question

当我在项目根目录中创建.env.local文件时，它设置不正确。

在文件中，我有我的 API 密钥，如下所示

API_KEY=SOME_API_KEY

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

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

下一个配置文件

module.exports = {
  reactStrictMode: true,
}

Answer 1

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

\n

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

\n

\n

1. 创建.env（所有环境）、.env.development（开发环境）、.env.Production（生产环境）、.env.local（本地环境）

   \n
\n

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

   \n

    NEXT_PUBLIC_BASE_URL=http://localhost:3000/\n

   \n
\n

3. 与前缀一起使用process.env

   \n

    process.env.NEXT_PUBLIC_BASE_URL\n

   \n
\n

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

   \n

   npm run dev\n\nOR \n\nyarn dev\n

   \n
\n

\n