如何解决如何在 Vercel 上为 Nextjs 应用正确设置环境变量
我正在 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 上添加环境变量
然后发送邮件不起作用。
我该如何设置它才能正常工作?
解决方法
简单地创建一个带有环境变量的 .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。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。