是NEXT_PUBLIC_..。类似REACT_APP_.？

Question

有时，我想隐藏url链接，同时使用GET或POST方法。每当我使用REACT_APP_时，我都会使用REACT_APP_隐藏url。我的问题是，如果我使用的是Next.js应用程序，我能用NEXT_PUBLIC_URL代替吗？这两个变量的工作原理相似吗？他们有什么不同？

React应用程序

axios.get(process.env.REACT_APP_URL)

下一个应用程序

axios.get(process.env.NEXT_PUBLIC_URL)

Answer 1

您的react应用程序运行在客户端上，因此无法安全地将变量保存在那里。

来自文档

警告:不要将任何秘密(如私人API密钥)存储在您的React应用程序中！环境变量被嵌入到构建中，这意味着任何人都可以通过查看应用程序的文件来查看它们。

这些文件通过将其引用为：

REACT_APP_NOT_SECRET_CODE

当你在上面做process.env.REACT_APP_URL的时候，你没有隐藏任何东西。您的请求可以在Chrome工具中看到。

这里的环境变量可以帮助不同环境(例如：staging-api/dev-api/prod-api )具有不同的URL值。不是为了保护API密钥或机密。

来问你的问题是两个相同的问题-是的，NEXT_PUBLIC_是一个很好的反作用力REACT_APP_。它也是向浏览器公开变量，并可用于这类路线等。

Next.JS，因为它也运行在服务器端，为您提供了一种保护变量的方法，而不是公开浏览器。这是通过省略NEXT_PUBLIC_ (因此基本上使用了任何泛型环境变量的命名约定)。

从医生那里：

默认情况下，环境变量仅在Node.js环境中可用，这意味着它们不会暴露在浏览器中。