被 Next.js 的环境变量给坑了一把...

最近在使用 Next.js 时遇到了一个问题,最后原因竟是 .env 取值问题,为这个问题花费了数小时的时间,希望看到这篇文章的朋友,如果遇到类似问题,不要重蹈覆辙吧。

起初报错内容如下所示:

图片

一开始关注点在下面这行:

Generating static pages (0/10)  [==  ] ⨯ TypeError: Cannot read properties of null (reading 'useContext')

看到这个报错以为只是 useContext Hook 的使用问题,看了代码后也没看出什么问题并且在同事的电脑试过了没有此问题,这就很难办了!

怀疑是否是版本问题,升级到最新的 V14.0.1 还是没能解决。之后在 Next.js Issue 下搜索相关关键词,确实找到了类似的提问,例如:?issues#57277、?issues#52478、?discussions#43577,截止目前没看到好的解决办法,还在讨论这个问题。

之后,注意到控制台有以下警告信息。

图片

根据提示看了下详细内容,注意到了下面标注的这句话,大概意思是如果未设置标准的 NODE_ENV 环境变量可能会导致依赖关系出现意外行为。

图片

这个 “意外行为” 就很难讲了,说不定真和上面的报错有关系,在执行 next build 时,打印了 NODE_ENV 环境变量发现被修改为了 development。在代码层面我是没有设置的,后来查了下本机的 ~/.zshrc 文件,发现这里设置了 NODE_ENV 环境变量为 development,才导致的 next build 时环境变量取值继承了本机设置的环境变量。

尝试修改命令为 NODE_ENV=production next build,结果成功了。但这种神奇的构建问题,对用户体验是真的不够好。

下面对 Next.js 环境变量的一些规则做个总结

在 Next.js 中,执行 next dev 命令时需要确保 NODE_ENV 为 development。执行 next start和 next build 命令时需要确保 NODE_ENV 为 production。

按照 Next.js 官网给的建议,在我们的代码仓库最好有三个文件:

  • .env(所有环境)
  • .env.development(开发环境)
  • .env.production(生产环境)

注意环境变量的加载顺序,Next.js 按以下顺序查找环境变量,一旦找到变量就停止。

  • process.env
  • .env.$(NODE_ENV).local
  • .env.local
  • .env.$(NODE_ENV)
  • .env

关于环境变量更多内容参考 Next.js 文档 ?https://nextjs.org/docs/app/building-your-application/configuring/environment-variables

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/145572.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

每天一道算法题(一)——在数组中找到目标值的之和的两个整数下标

文章目录 1、问题2、示例2、解决 1、问题 给定一个整数数组 nums 和一个整数目标值 target,请你在该数组中找出 和为目标值 target 的那 两个 整数,并返回它们的数组下标。你可以假设每种输入只会对应一个答案。但是,数组中同一个元素在答案里…

ubuntu提高 github下载速度

Github一般用于Git的远程仓库,由于服务器位于国外,国内访问速度比较慢,为了提高访问速度,决定绕过DNS域名解析。 获取Github的IP地址 按下ctrl+alt+T打开命令终端,输入: nslookup gi…

玩具、儿童用品、儿童服装上亚马逊TEMU平台CPC认证办理

CPC认证是Childrens Product Certificate的简称,即儿童产品证书。它是美国强制性法规CPSIA要求的一部分,该法规主要针对12岁及以下儿童使用的产品,如玩具、儿童用品、儿童服装等。 一、儿童小汽车CPC测试项目可能会因产品标准和法规的不同而…

android初集成flutter,遇到的问题

环境 studio版本:2022.1.1 flutter版本:2.8.0 电脑:mac flutter项目总是报错,编译不过 以 Resources Root 加载 记得设置dart:主工程和flutter项目都需要设置,否则不出现手机链接 下面这个样子就是好了&…

窗口管理工具 Mosaic mac中文版功能特点

MosAIc mac是一种窗口管理工具,可帮助您在计算机屏幕上有效地组织和管理多个应用程序窗口。它提供了一种直观的方式来调整和排列窗口,以最大化工作效率。 MosAIc mac窗口管理软件功能和特点 窗口布局:MosAIc允许您选择不同的窗口布局&#x…

抠某区域地图方法

1.打开阿里云数据可视化平台DataV.GeoAtlas地理小工具系列 2. 选择要抠出来的区域,右侧选择要下载的json文件,如红框所示 3. 打开下载的文件,内容全部复制。 4. 打开百度地图示例Examples - Apache ECharts 5. 如下图所示,将下…

数字化转型时代,商业智能BI到底是什么?

据国际数据公司(IDC)预测,2025年时中国产生的数据量预计将达48.6ZB,在全球中的比例为27.8%。商业智能BI这一专为企业提供服务的数据类解决方案,仅2021年上半年在中国商业智能BI市场规模就达到了3.2亿美元,商…

(二)什么是Vite——Vite 和 Webpack 区别(冷启动)

vite分享ppt,感兴趣的可以下载: ​​​​​​​Vite分享、原理介绍ppt 什么是vite系列目录: (一)什么是Vite——vite介绍与使用-CSDN博客 (二)什么是Vite——Vite 和 Webpack 区别&#xff0…

电源线虚接,导致信号线发烫

音频板的信号是经过隔直电容接到音频板的。

Nginx在实际使用中的常用基本配置

一、什么是Nginx Nginx 是开源的轻量级 Web 服务器、反向代理服务器,以及负载均衡器和 HTTP 缓存器。其特点是高并发,高性能和低内存。 Nginx 专为性能优化而开发,性能是其最重要的考量,实现上非常注重效率,能经受高负…

Linux应用开发基础知识——电阻屏和电容屏(八)

触摸屏分为电阻屏、 电容屏。电阻屏结构简单, 在以前很流行;电容屏支持 多点触摸,现在的手机基本都是使用电容屏。 注意:LCD、触摸屏不是一回事,LCD 是输出设备,触摸屏是输入设备。制作触摸 屏时特意把它的…

数据结构八种内部排序算法c++实现

文章目录 直接插入排序希尔排序冒泡排序快速排序选择排序堆排序归并排序桶排序 直接插入排序 vector<int> insertSort(vector<int> num) {int i, j, temp;for (i 1; i < num.size(); i){temp num[i];for (j i - 1; j > 0 && temp<num[j]; j-…

mysqldump常用操作示例/命令

以下是一些常用的mysqldump操作示例&#xff0c;以备份和还原MySQL数据库为例&#xff1a; 1. 备份单个数据库&#xff1a; mysqldump -u your_username -p your_password your_database > backup.sql将 your_username 替换为你的MySQL用户名&#xff0c;your_password 替…

反序列化漏洞(1), 原理, 实验, 魔术方法

反序列化漏洞(1), 原理, 实验, 魔术方法 一, 介绍 反序列化漏洞是一种存在于反序列化过程中的漏洞&#xff0c;它允许攻击者通过控制反序列化的数据来操纵序列化对象&#xff0c;并将有害数据传递给应用程序代码。 这种漏洞可能造成代码执行、获取系统权限等一系列不可控的后…

【ES6标准入门】JavaScript中的模块Module的加载实现:循环加载和Node加载,非常详细,建议收藏!!!

&#x1f601; 作者简介&#xff1a;一名大四的学生&#xff0c;致力学习前端开发技术 ⭐️个人主页&#xff1a;夜宵饽饽的主页 ❔ 系列专栏&#xff1a;JavaScript进阶指南 &#x1f450;学习格言&#xff1a;成功不是终点&#xff0c;失败也并非末日&#xff0c;最重要的是继…

IDEA写mybatis程序,java.io.IOException:Could not find resource mybatis-config.xml

找不到mybatis-config.xml 尝试maven idea:module&#xff0c;不是模块构造问题 尝试检验pom.xml&#xff0c;在编译模块添加了解析resources内容依旧不行 <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.or…

chrome 浏览器个别字体模糊不清

特别是在虚拟机里&#xff0c;有些字体看不清&#xff0c;但是有些就可以&#xff0c;设置办法&#xff1a; chrome://settings/fonts 这里明显可以看到有些字体就是模糊的状态&#xff1a; 把这种模糊的字体换掉即可解决一部分问题。 另外&#xff0c;经过观察&#xff0c;…

【C++】数组中出现次数超过一半的数字

代码&#xff1a; class Solution { public:/*** 代码中的类名、方法名、参数名已经指定&#xff0c;请勿修改&#xff0c;直接返回方法规定的值即可** * param numbers int整型vector * return int整型*/int MoreThanHalfNum_Solution(vector<int>& numbers) {int …

h5(react ts 适配)

一、新建项目并放在码云托管 1、新建项目&#xff1a;react ts h5 考虑到这些 用 create-react-app 脚手架来搭建项目。 首先&#xff0c;确保你已经安装了 Node.js。如果没有安装&#xff0c;请先从官方网站 https://nodejs.org/ 下载并安装 Node.js。打开命令行工具&#x…

vue3 + ts项目(无vite)报错记录

记录项目创建后遇到的报错 1.类型“Window & typeof globalThis”上不存在属性“_CONFIG”。ts(2339) 问题描述&#xff1a; 使用全局 window 上自定义的属性&#xff0c;TypeScript 会报属性不存在 解决&#xff1a;需要将自定义变量扩展到全局 window 上&#xff0c…