如何在部署到 Vercel 的 Next.js 应用程序中正确设置环境变量？

Question

我正在 Next.js 中构建我的网络应用程序，并且我一直在做一些测试。我正在做的是将我的代码推送到 GitHub，然后从那里将项目部署到 Vercel。

我正在使用 Google API 依赖项，它需要一些客户端 ID 和客户端密钥，以便我能够使用节点邮件程序从客户端向收件箱发送电子邮件（我通过联系表单执行此操作）。

但是，在 localhost 上一切工作正常，但是当我部署到 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，那么发送电子邮件在localhost上不起作用，在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 在 localhost 上工作，但如果我在 Vercel 上添加环境变量（如此处所示），则发送邮件不起作用。

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

Answer 1

只需使用环境变量创建一个.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

这将在浏览器上使用：

NEXT_PUBLIC_CLIENT_URL=vxcxsfddfdgd

有关 Next.js 中环境变量的更多详细信息，请参阅https://nextjs.org/docs/basic-features/environment-variables。

同样的原则适用于您在 Vercel（或任何其他托管服务）中创建的环境变量，添加前缀将使它们可供浏览器使用。

Environment Variables您可以通过的 页面在 Vercel 中Project Settings添加与.env.local.

有关 Vercel 中环境变量的更多详细信息，请参阅https://vercel.com/docs/concepts/projects/environment-variables。