Next.js 如何通过CLI的next dev命令在localhost启动HTTPS开发模式

1. 通过next dev命令启动本地HTTPS开发模式 #

Next.js 13.4及以上版本官方已经内置了HTTPS开发服务支持，无需编写自定义服务器即可直接通过CLI参数启用。如果你的项目使用的是更低版本的Next.js，也可以通过本地代理的方式实现，不需要修改项目代码。

2. next dev命令的HTTPS相关参数及package.json配置 #

next dev 支持以下HTTPS相关的传参：

• --experimental-https：开启HTTPS模式，Next.js会自动生成临时自签名证书
• --experimental-https-key：指定自定义SSL私钥文件的本地路径，例：./certs/localhost-key.pem
• --experimental-https-cert：指定自定义SSL证书文件的本地路径，例：./certs/localhost.pem
• --experimental-https-ca：可选参数，指定自定义CA证书的本地路径，适用于特殊签名场景

对应的package.json scripts 配置示例：

{
  "scripts": {
    "dev:https": "next dev --experimental-https",
    "dev:https-custom": "next dev --experimental-https --experimental-https-key ./certs/localhost-key.pem --experimental-https-cert ./certs/localhost.pem"
  }
}

配置完成后运行对应npm命令即可启动HTTPS开发服务，比如执行npm run dev:https后直接访问https://localhost:3000即可。如果不想每次访问都手动信任Next.js自动生成的临时自签名证书，可以用mkcert工具生成本地信任的根证书，再将生成的证书和私钥路径通过上述参数传入即可。

3. 无需编写自定义HTTPS服务器的实现方案 #

除了官方内置的参数方案外，还有两种无侵入的实现方案：

• 本地反向代理：用mkcert生成本地信任的证书后，配合Nginx、Caddy等反向代理工具，将HTTPS请求转发到默认HTTP协议的next dev服务上，该方案适配所有Next.js版本，完全不会侵入项目配置
• 轻量代理工具：使用local-ssl-proxy这类开箱即用的轻量代理工具，一行命令即可将默认3000端口的HTTP开发服务包装成HTTPS服务，示例命令：npx local-ssl-proxy --source 3001 --target 3000，运行后访问https://localhost:3001即可使用HTTPS协议访问开发服务

内容的提问来源于stack exchange，提问作者Cody Ng