Question

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

我正在使用 google apis 依赖项，它需要一些客户端 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 as shown in here 上添加环境变量

然后发送邮件不起作用。

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

Answer 1

简单地创建一个带有环境变量的 .env.local 文件应该足以被服务器上的 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

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

有关详细信息，请参阅Next.js Environment Variables documentation。

如何在 Vercel 上为 Nextjs 应用正确设置环境变量

1 个答案: