问通过带有next.config.js前缀的NEXT_PUBLIC vs公开nextjs中的环境变量有什么区别？

EN

NEXT_PUBLIC是一个新增加的特性。以前，为了设置环境变量，我们必须分别设置服务器和客户端。

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

但是在next.config中为浏览器设置env变量是不必要的。这是客户端env在next.config.js中的一个示例：

module.exports = {
  env: {
    AUTH0_NAMESPACE: process.env.AUTH0_NAMESPACE,
    BASE_URL: process.env.BASE_URL
  }
}

使用NEXT_PUBLIC，env变量将在客户端和服务器端都可用.使用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

两者的区别在于，其中一个使用.env文件，而另一个使用next.config文件。从Next.js 9.4开始，现在支持用.env文件加载环境变量。

但是，为了澄清问题中的一件事，.env文件中的所有环境变量都不必以NEXT_PUBLIC作为前缀，只有您希望暴露在浏览器中的环境变量，任何没有该前缀的环境变量都只能在服务器上访问。