在本地开发 Next.js 项目时，我们常常会配置自定义域名，例如：
dev.local-app.test并通过 Next.js 实验性 HTTPS 功能启动：
"dev": "next dev --experimental-https -p 7777 -H dev.local-app.test"但一个非常常见的问题是：
问题现象
✔ hosts 已配置：
127.0.0.1 dev.local-app.test✔ ping 正常：
ping dev.local-app.test → 127.0.0.1✔ Next.js 正常启动：
Local: https://dev.local-app.test:7777✔ 以下地址正常：
https://127.0.0.1:7777
https://localhost:7777❌ 自定义域名 HTTPS 失败：
https://dev.local-app.test:7777
网络连接异常 / 网站服务器失去响应关键验证步骤：curl
curl -k https://dev.local-app.test:7777返回正常内容：
bash
/✔ 返回正常内容 →
服务器没问题
Next.js 没问题
hosts 没问题
问题锁定：浏览器 HTTPS 校验
根因分析
Next.js 的：
--experimental-https内部使用的是：
mkcert 自签名证书
mkcert 机制：
✔ 自动生成本地证书
✔ 自动生成 Root CA
❌ 浏览器默认不信任
前置知识：mkcert 是什么？
mkcert 是一个本地开发专用工具，用于：
✔ 生成可信任的本地 HTTPS 证书
✔ 自动创建本地 Root CA
✔ 解决自签名证书不被浏览器信任问题
Next.js 实验性 HTTPS 本质上依赖 mkcert。
Windows 下 mkcert 未安装时的安装指南
如果执行：
mkcert提示：
'mkcert' 不是内部或外部命令说明 mkcert 尚未安装。
① 下载 mkcert
官方地址：
https://github.com/FiloSottile/mkcert
进入 Releases
下载：
mkcert-vX.X.X-windows-amd64.exe② 重命名（推荐）
将文件改名为：
mkcert.exe③ 放入 PATH 目录（推荐做法）
例如：
C:\Windows\System32或
C:\Tools\mkcert\若使用自定义目录：
需要加入 PATH
④ 添加 PATH（如需要）
系统环境变量 → PATH → 新增：
C:\Tools\mkcert\重启终端。
⑤ 验证安装
mkcert -version✔ 显示版本号 → 安装成功
安装 Root CA（核心步骤）
mkcert -install成功标志：
The local CA is now installed in the system trust store! 👍非常重要：完全关闭浏览器
✔ 刷新无效
✔ 必须彻底关闭 Chrome / Edge
为什么 localhost 可以访问？
浏览器对白名单地址特殊处理：
✔ localhost
✔ 127.0.0.1
自定义域名没有这个待遇。
Windows 下 mkcert "已安装但仍无效" 排坑指南
① 检查 Root CA 是否真的安装
Win + R →
certmgr.msc查看：
Trusted Root Certification Authorities应存在：
mkcert development CA② 清除 Chrome HSTS（非常常见）
chrome://net-internals/#hstsDelete domain：
dev.local-app.test③ 删除旧证书缓存（Next.js 高频坑）
删除：
/certificates重启 Next dev。
④ hosts 文件建议写法
推荐分行：
127.0.0.1 dev.local-app.test
127.0.0.1 localhost⑤ 确认 Next 监听 Host
启动日志应显示：
Local: https://dev.local-app.test:7777排查逻辑总结（实战通用）
当遇到：
✔ localhost 正常
✔ IP 正常
✔ 自定义域名 HTTPS 失败
优先级：
curl -k
mkcert -install
certmgr.msc
清除 HSTS
删除 certificates本质理解（重点）
问题并不是：
❌ Next.js
❌ 域名解析
❌ hosts
而是：
浏览器 TLS 信任机制
HTTPS 是否可用取决于：
✔ Root CA 是否信任
✔ 证书域名是否匹配
✔ HSTS 是否强制策略
✔ 浏览器缓存状态
推荐长期稳定方案
✔ mkcert 手动统一证书
✔ 多域名共享证书
✔ turborepo / 多项目统一 HTTPS
避免：
❌ HTTPS 随机失效
❌ 证书重复生成
❌ 浏览器策略冲突
结论
在 Next.js 本地 HTTPS 场景中：
绝大多数自定义域名访问失败 = mkcert / 浏览器信任问题
牢记三板斧：
curl -k
mkcert -install
清除 HSTS即可快速定位问题。