Github 如何在Vercel上正确设置Nextjs应用程序的环境变量

我正在Nextjs中构建我的web应用程序，并且我已经做了一些测试。我正在做的是将代码推送到GitHub，然后将项目部署到Vercel

我正在使用谷歌API依赖项，这需要一些客户端ID和客户端机密，以便我能够使用node mailer将电子邮件从客户端发送到收件箱（我通过联系表单来完成这项工作）

然而，在本地主机上，一切正常，但当我部署到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上添加环境变量

那么发送邮件就不起作用了

---

我如何设置它才能正常工作？

只需创建一个包含环境变量的

.env.local

文件，服务器上的Next.js就可以选择它了。无需向

next.config.js

添加任何内容

#.env.local
客户端URL=vxcxsfddfdgd
邮寄服务客户ID=1245785165455GHDGFHASBDDAHHHHHM
邮寄服务客户机密=Rdfvcnsf4263543624362536
邮寄服务刷新令牌=000000
用户\电子邮件\地址=yesyesyesyesyesyes@gmail.com

但是，如果需要向浏览器公开变量，则必须在变量前面加上

NEXT\u PUBLIC\u

NEXT_PUBLIC_CLIENT_URL=vxcxsfddfdgd

这将通过以下方式在浏览器上提供：

process.env.NEXT\u PUBLIC\u CLIENT\u URL

同样的原则也适用于您在Vercel中创建的环境变量，添加前缀将使它们可用于浏览器

---

有关更多详细信息，请参阅。

我已经这样做了；NEXT\u PUBLIC\u API\u KEY=xxxxxxxxxxx，但当我从组件（如

console.log（process.env.NEXT\u PUBLIC\u API\u KEY）

访问它时，它未定义。您在哪里设置了环境变量？我使用了

.env.local

我建议您创建一个新问题，详细说明

.env.local

的内容以及您尝试记录

process.env.NEXT\u PUBLIC\u API\u KEY的组件的代码。