通过 next.config.js 与 NEXT_PUBLIC 前缀在 nextjs 中公开环境变量有什么区别？

Question

根据 nextjs 文档，如果我想 expose my environment variables to the browser 我可以在我的 .env.local 文件中用 NEXT_PUBLIC 作为前缀，就像这样：

NEXT_PUBLIC_VAR=7

但是，看起来我可以也使用 next.config.js 将我的环境变量暴露给浏览器，如下所示：

module.exports = {
  env: {
    PUBLIC_VAR: process.env.PUBLIC_VAR,
  },
}

这两种策略有什么区别？

Answer 1

两者之间的区别在于，一个使用 .env 文件，而另一个使用 next.config 文件。自 Next.js 9.4 起，现在支持使用 .env 文件加载环境变量。

但是，为了澄清你问题中的一件事，.env 文件中的所有环境变量都不必以 NEXT_PUBLIC 为前缀，只有你想暴露给浏览器的那些，没有的前缀只能在服务器上访问。

Answer 2

NEXT_PUBLIC是新增功能。之前，为了设置环境变量，我们必须为服务器和客户端设置。

放在 .env 文件中的环境变量只能在服务器端使用，如果你想让你的环境变量在客户端可用，你必须使用 next.config.js。我们在这里遵循关注点分离原则。

有了 NEXT_PUBLIC，环境变量将在客户端和服务器端都可用。使用 NEXT_PUBLIC 设置的 env 变量将暴露给浏览器。

所以总而言之，将前缀 NEXT_PUBLIC 添加到您的环境变量与通过 next.config.js.

向浏览器公开您的环境变量具有相同的效果

他们没有太大区别。

试试这个：

将其放入 .env 或 env.development 文件。不要 next.config.js

 MY_VAR=10

然后运行这个：

    console.log("MY var",process.env.MY_VAR);

在客户端组件和 getServerSideProps 函数中。如果你检查浏览器控制台，你会看到 undefined，但在终端上你会看到

MY var 10

What's the difference between exposing environment variables in nextjs through the next.config.js vs with the NEXT_PUBLIC prefix?