Loading [MathJax]/jax/output/CommonHTML/config.js

开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

社区首页 >问答首页 >如何在部署到Vercel的Next.js应用程序中正确设置环境变量？

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

Stack Overflow用户

提问于 2021-02-20 08:23:03

回答 1查看 4.9K关注 0票数 3

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

我正在使用Google依赖项，这需要一些客户端ID和客户端秘密，以便我能够使用节点邮件从我的客户端发送电子邮件到收件箱(我正在通过联系人表单这样做)。

然而，在本地主机上一切正常，但是当我部署到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 如图所示上添加了环境变量，那么发送邮件就不能工作。

我怎样才能让这件事对我有效呢？

environment-variables

EN

回答 1

Stack Overflow用户

发布于 2021-02-20 08:58:23

简单地使用环境变量创建.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

这将在浏览器上使用：

process.env.NEXT_PUBLIC_CLIENT_URL

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

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

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

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

票数 5

EN

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/66293848

复制

相关文章

#include <bits/stdc++.h> #define ll long long using namespace std; pair<int,int> star[1500000]; int d[1500000]; int main() { int n,x,y; scanf("%d",&n); for(int i=0;i<n;i++) { scanf("%d %d",&star[i].second,&star[i].first); } sort(star,star+n);//按结束

用户2965768

2019/03/19

4600

声明：本文为原创，作者为对弈，转载时请保留本声明及附带文章链接：http://www.duiyi.xyz/c%e5%ae%9e%e7%8e%b0%e9%9b%b7%e9%9c%86%e6%88%98%e6%9c%ba-57/

对弈

2019/09/04

5320

1611: [Usaco2008 Feb]Meteor Shower流星雨

1611: [Usaco2008 Feb]Meteor Shower流星雨 Time Limit: 5 Sec Memory Limit: 64 MB Submit: 1010 Solved: 446 [Submit][Status][Discuss] Description 去年偶们湖南遭受N年不遇到冰冻灾害，现在芙蓉哥哥则听说另一个骇人听闻的消息：一场流星雨即将袭击整个霸中，由于流星体积过大，它们无法在撞击到地面前燃烧殆尽，届时将会对它撞到的一切东西造成毁灭性的打击。很自然地，芙蓉哥哥开始担心自

HansBug

2018/04/10

6120

CSS3实现流星动画

来个青春时尚的流星雨吧！实例demo 项目源码Github 效果预览: 项目实际使用效果: 喜欢就来个Star吧

大象无痕

2018/06/27

1.8K0

脑洞科技 | 私人订制流星雨

摘自：煎蛋网站：http://jandan.net/ 微信：jandancom 当你仰望星空许下诺言，一定会期待着看到流星雨。人们非常希望看到有自然魔力的流星雨，而现在有一家日本公司可以让你圆梦

大数据文摘

2018/05/21

6240

警车在巡逻时意外拍到了流星划过夜空双子座流星雨正处于高峰期

随着行车记录仪的普及，我们很容易捕捉到一些转瞬即逝的场景。而在双子座流星雨处于巅峰的当下，夜间巡逻的警员们，显然最有机会欣赏到流星划过夜空的美景。

Zip

2018/12/27

5630

警车在巡逻时意外拍到了流星划过夜空双子座流星雨正处于高峰期

HTML5炫酷流星动画特效教程

html5 javascript

这是一款HTML5炫酷光粒子动画特效。该特效通过js在页面中生成canvas元素，并通过算法在其中生成炫酷的光粒子动画特效。使用方法

用户5997198

2019/08/09

10.2K1

HTML5炫酷流星动画特效教程

柯西-施瓦茨不等式

柯西-施瓦茨不等式（Cauchy-Schwarz inequality，简称为 CS 不等式）被认为是数学中使用最广泛的不等式之一。

hotarugali

2022/03/18

1.9K0

03_多协程爬取糗事百科热图

今天在使用正则表达式时未能解决实际问题，于是使用bs4库完成匹配，通过反复测试，最终解决了实际的问题，加深了对bs4.BeautifulSoup模块的理解。

py3study

2020/01/17

5350

Django临时重定向和永久重定向

php 网站 django

今天在看一篇讲解Django的文章的时候，出现了重定向这个字眼，不太理解，后来查文才明白了啥意思。

kirin

2020/11/11

2.4K0

Bypass 重定向

php 网站 http

http 参数可能包含 URL 值，并可能导致 Web 应用程序将请求重定向到指定的 URL。通过将 URL 值修改为恶意站点，攻击者可能会成功发起网络钓鱼诈骗并窃取用户凭据。由于修改后的链接中的服务器名称与原始站点相同，因此网络钓鱼尝试具有更可信的外观。

Khan安全团队

2022/01/10

1.5K0

Django重定向

上述的情形，在前后端分离情形下，可以这样做。前端请求一个需要身份认证的接口给后端，后端先判断这个请求携带的session或者token是否是登录状态。如果是，返回成功响应；如果该请求的发起者未登录，则后端返回未登录，前端根据返回值，跳转到登录页面即可。当然，也可以是后端直接重定向到前端页面。不过这样做，就需要知道前端的路由。前端和后端之间耦合度就变得更高了。

zy010101

2021/11/02

2.7K0

重定向 rewriteRule

html php 网站 https http

大家好，又见面了，我是你们的朋友全栈君。重定向学习视频 https://www.imooc.com/learn/798 1、RewriteRule R 说明 RewriteRule ^/?(.

全栈程序员站长

2022/08/28

3.6K0

重定向 rewriteRule

临时重定向和永久重定向的状态码_java重定向怎么写

网站 java https http 网络安全

重定向分为永久重定向和临时重定向，在页面上体现的操作就是浏览器会从一个页面自动跳转到另外一个页面。比如用户访问了一个需要权限的页面，但是该用户当前并没有登录，因此我们应该给他重定向到登录页面。

全栈程序员站长

2022/09/19

2.2K0

django重定向

django 重定向

return HttpResponseRedirect('/index/')# 重定向返回url格式：http://127.0.0.1:8000/index/会去掉前期的所有路由重新写入/index/'路由 urls代码 from django.urls import path from django.contrib import admin from ProductOutWarehouse import views urlpatterns = [ path('admin/', admin.s

py3study

2020/01/19

1.4K0

DIY一个自己喜欢的瓦力吧！

随着科学技术的快速发展，AI技术已经越来越接近人们的日常生活，人们对智能车的研究有增无减，智能小车已然成为以后科学技术发展的新思路和新方向。智能小车可以按照预先设定的模式在一哥环境里自动运作，不需要我们的操控，可应用于路面检测,科学勘探,智能温度测量等。日常生活中，很多交通事故是由于人的反应时间过长导致，而智能小车实现了自动应急，自动避障，为生命安全做最后的保障。

FB客服

2018/07/30

8100

视图重定向0 重定向视图 RedirectView1 向重定向目标传递数据2 重定向前缀——redirect:3 重定向前缀——forward:

控制器通常都会返回一个逻辑视图名，然后视图解析器会把它解析到一个具体的视图技术上去渲染。对于一些可以由Servlet或JSP引擎来处理的视图技术，比如JSP等，这个解析过程通常是由 InternalResourceViewResolver 和 InternalResourceView 协作来完成的，而这通常会调用ServletAPI RequestDispatcher.forward(..) 方法或 RequestDispatcher.include(..) 方法，并发生一次内部的转发（forward）或引

JavaEdge

2018/05/16

2.5K0

我用 140 行代码，带你看一场流星雨⭐

在一个夜深人静的晚上，程序员小丞坐在屋顶上，看着屏幕上满屏的error，心里拔凉拔凉的，泪水润湿了脸庞，无数个自己提桶跑路的身影充斥在脑海之中，猛然才发现自己还没有桶。此时星空中闪过了漫天的流星，小丞看到此景，心中的bug早已化去，留下的是还原此景的豪言壮举！（梦醒了，纯属瞎编）

小丞同学

2021/08/16

2K0

jmeter中自动重定向和跟随重定向的区别

网站 xml apache json html

自动重定向（状态码一般是200、20X）：当重定向时，自动跳转时，只针对GET和Head请求，自动重定向可以自动跳转到最终目标页面，但是jmeter不记录重定向过程内容【在查看结果树中只能看到重定向后的响应内容】

muntainyang

2020/10/23

2.1K0

网站编程算法

1、标准（追加）输出重定向，用数字1表示，符号为>或1>，数据流向朝右，接收命令正常执行输出

用户4982247

2022/07/07

2.6K0

相似问题

科多瓦流星上的CORS

10

流星科多瓦从画廊上传照片？

15

上传流星和科多瓦的视频

12

流星-科多瓦:如何添加权限？

27

流星-图像不加载在移动(科多瓦)

22

添加站长进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例