如何在部署到 Vercel 的 Next.js 应用程序中正确设置环境变量? [英] How to properly set environment variables in Next.js app deployed to Vercel?

问题描述

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

I am building my web app in Next.js, and I have been doing some tests. What I am doing is to push my code to GitHub and from there deploy the project on to Vercel.

我正在使用 Google API 依赖项，这些依赖项需要一些客户端 ID 和客户端密码，以便我能够使用 node-mailer 从客户端向收件箱发送电子邮件(我正在通过联系表单执行此操作).

I am using Google APIs dependencies which require some Client ID and Client secret for me to be able to send emails using node-mailer from my client side to inbox (I'm doing this via a contact form).

但是，在 localhost 上一切正常，但是当我部署到 Vercel 时，我无法让我的联系表单发送邮件(与环境变量有关的问题).

However, on localhost everything is working fine but when I deploy onto Vercel, I am not able to make my contact form send mails (an issue that has to do with environment variables).

我尝试了选项 A 和 B

选项 A

创建了一个 .env.local，在那里添加了我的变量，然后在 next.config.js 中访问它们，如下面的代码所示(控制台日志表明我可以在我的应用程序的任何位置访问变量)

Created a .env.local, added my variables there, then accessed them in next.config.js as shown in the code below (console log shows that I can access the variables anywhere on my app)

.env.local

env:{
    CLIENT_URL:'vxcxsfddfdgd',
    MAILING_SERVICE_CLIENT_ID:'1245785165455ghdgfhasbddahhhhhhhhm',
    MAILING_SERVICE_CLIENT_SECRET:'Rdfvcnsf4263543624362536',
    MAILING_SERVICE_REFRESH_TOKEN:'000000',
    USER_EMAIL_ADDRESS:'[e-mail]',        
}

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 上也不起作用.

If I do like Option A as per above, then send emails does not work on localhost neither does it work on Vercel.

选项 B

我将变量放在 next.config.js 中，如下所示将 next.config.js 添加到 .gitignore 然后推送到 GitHub.

I put my variables in next.config.js as below add the next.config.js to .gitignore then push to 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:'[e-mail]',
    
  }
}

选项 B 在本地主机上工作，但如果我在 Vercel 上添加环境变量 如图所示 然后发送邮件不起作用.

Option B works on localhost, but if I add environment variable on Vercel as shown in here then send mail does not work.

如何设置它以使其正常工作?

How can I set this to work properly for me?

推荐答案

只需使用您的环境变量创建一个 .env.local(或 .env)文件即可足以被服务器上的 Next.js 选择.无需向您的 next.config.js 添加任何内容.

Simply creating a .env.local (or .env) file with your environment variables should be enough to be picked by Next.js on the server. There's no need to add anything to your 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=[e-mail]

但是，如果您需要 向浏览器公开一个变量你必须在变量前面加上NEXT_PUBLIC_.

However, if you need to expose a variable to the browser you have to prefix the variable with NEXT_PUBLIC_.

NEXT_PUBLIC_CLIENT_URL=vxcxsfddfdgd

这将在浏览器上使用:

process.env.NEXT_PUBLIC_CLIENT_URL

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

The same principle applies to environment variables you create in Vercel (or any other hosting service), adding the prefix will make them available to the browser.

有关详细信息，请参阅 Next.js 环境变量文档.

For more details refer to Next.js Environment Variables documentation.

这篇关于如何在部署到 Vercel 的 Next.js 应用程序中正确设置环境变量?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！