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

Question

根据nextjs文档，如果我想将环境变量公开给浏览器，我可以NEXT_PUBLIC在.env.local文件中添加它们的前缀，如下所示：

NEXT_PUBLIC_VAR=7

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

NEXT_PUBLIC_VAR=7

这将添加到 javascript 包中

这两种策略有什么区别？

Answer 1

NEXT_PUBLIC是一个新添加的功能。之前，为了设置环境变量，我们必须分别设置服务器和客户端。

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

但是在 中为浏览器设置环境变量next.config是太多不必要的输入。next.config.js这是客户端环境的示例：

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

使用NEXT_PUBLIC，环境变量将在客户端和服务器端都可用。设置的 env 变量NEXT_PUBLIC将暴露给浏览器。因此，请确保不要将敏感数据暴露给浏览器。

总之，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