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

Question

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

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

但是，在本地主机上一切正常，但是当我部署到 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 适用于本地主机，但如果我在 Vercel as shown in here 上添加环境变量，则发送邮件不起作用。

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

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

但是，如果你需要expose a variable to the browser您必须在变量前加上 NEXT_PUBLIC_ 前缀。

NEXT_PUBLIC_CLIENT_URL=vxcxsfddfdgd

这将在浏览器上可用:

process.env.NEXT_PUBLIC_CLIENT_URL

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

---

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

您可以通过 Project Settings 的 Environment Variables 页面在 Vercel 中添加环境变量，与 .env.local 中的变量相匹配>.

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