如何在部署到Vercel的Next.js应用程序中正确设置环境变量？
我正在用Next.js构建我的网络应用程序，我一直在做一些测试。我正在做的是将我的代码推送到GitHub，然后将项目部署到Vercel。
我正在使用Google依赖项，这需要一些客户端ID和客户端秘密，以便我能够使用节点邮件从我的客户端发送电子邮件到收件箱(我正在通过联系人表单这样做)。
然而，在本地主机上一切正常，但是当我部署到Vercel上时，我无法让我的联系人表单发送邮件(这与环境变量有关)。
我尝试了选项A和B
选项A
创建一个.env.local，在那里添加我的变量，然后在next.config.js中访问它们，如下面的代码所示(控制台日志显示，我可以在我的应用程序的任何地方访问这些变量)
.env.local
env:{
CLIENT_URL:'vxcxsfddfdgd',
MAILING_SERVICE_CLIENT_ID:'1245785165455ghdgfhasbddahhhhhhhhm',
MAILING_SERVICE_CLIENT_SECRET:'Rdfvcnsf4263543624362536',
MAILING_SERVICE_REFRESH_TOKEN:'000000',
USER_EMAIL_ADDRESS:'yesyesyesyesyesyes@gmail.com',
}next.config.js
module.exports = {
env:{
CLIENT_URL: process.env.CLIENT_URL,
MAILING_SERVICE_CLIENT_ID: process.env.MAILING_SERVICE_CLIENT_ID,
MAILING_SERVICE_CLIENT_SECRET: process.env.MAILING_SERVICE_CLIENT_SECRET,
MAILING_SERVICE_REFRESH_TOKEN: process.env.MAILING_SERVICE_REFRESH_TOKEN,
USER_EMAIL_ADDRESS: process.env.USER_EMAIL_ADDRESS,
}
}如果我喜欢上面的选项A，那么发送电子邮件在本地主机上不起作用，在Vercel上也不起作用。
选项B
我将变量放入next.config.js中，如下所示，将next.config.js添加到.gitignore，然后推送到GitHub。
module.exports = {
env:{
CLIENT_URL:'http://localhost:3000',
MAILING_SERVICE_CLIENT_ID:'7777777777777777777777',
MAILING_SERVICE_CLIENT_SECRET:'R123456789',
MAILING_SERVICE_REFRESH_TOKEN:'1123456789',
USER_EMAIL_ADDRESS:'seiseibaba@gmail.com',
}
}选项B在本地主机上工作，但是如果我在Vercel 如图所示上添加了环境变量，那么发送邮件就不能工作。
我怎样才能让这件事对我有效呢？
回答 1
Stack Overflow用户
发布于 2021-02-20 08:58:23
简单地使用环境变量创建.env.local (或.env)文件就足以让服务器上的Next.js选择。没有必要向您的next.config.js添加任何内容。
# .env.local
CLIENT_URL=vxcxsfddfdgd
MAILING_SERVICE_CLIENT_ID=1245785165455ghdgfhasbddahhhhhhhhm
MAILING_SERVICE_CLIENT_SECRET=Rdfvcnsf4263543624362536
MAILING_SERVICE_REFRESH_TOKEN=000000
USER_EMAIL_ADDRESS=yesyesyesyesyesyes@gmail.com但是，如果需要向浏览器公开一个变量，则必须在变量前面加上NEXT_PUBLIC_。
NEXT_PUBLIC_CLIENT_URL=vxcxsfddfdgd这将在浏览器上使用：
process.env.NEXT_PUBLIC_CLIENT_URL有关Next.js中的环境变量的详细信息，请参阅https://nextjs.org/docs/basic-features/environment-variables。
同样的原则也适用于您在Vercel (或任何其他托管服务)中创建的环境变量，添加前缀将使浏览器可以使用它们。
您可以通过Environment Variables页面在Vercel中添加环境变量，该页面与.env.local中的变量相匹配。
有关Vercel中的环境变量的详细信息，请参阅https://vercel.com/docs/concepts/projects/environment-variables。
https://stackoverflow.com/questions/66293848
复制
![OpenGL ES 2.0 (iOS)[04]：坐标空间 与 OpenGL ES 2 3D空间](https://ask.qcloudimg.com/http-save/yehe-2952823/ko7c65j2wd.jpeg)
腾讯云开发者
