【前端】在 Next.js 开发服务器中应该如何配置 HTTPS？
在 Next.js 的开发环境中，默认情况下是使用 HTTP 协议的。但是，您可以通过一些配置来启用 HTTPS。这在开发阶段可能很有用，尤其是在需要测试涉及安全传输的应用场景时。
下面是如何在 Next.js 开发环境中配置 HTTPS 的步骤：
方法一：使用 https 模块
您可以使用 Node.js 的内置模块 https 来启动一个支持 HTTPS 的开发服务器。这通常涉及到生成 SSL 证书和密钥。
生成自签名证书
首先，您需要生成一个自签名的 SSL 证书和对应的密钥。可以使用 OpenSSL 来生成：
-
安装 OpenSSL（如果尚未安装）：
对于 Ubuntu/Debian：
sudo apt-get install openssl对于 macOS：
brew install openssl -
生成自签名证书和密钥：
openssl req -x509 -newkey rsa:2048 -nodes -out cert.pem -keyout key.pem -days 365 -subj "/CN=localhost"这个命令会生成两个文件：
cert.pem（证书文件）和key.pem（密钥文件）。
配置 Next.js 开发服务器
接下来，您需要修改 package.json 文件中的 dev 脚本来使用 HTTPS 模式启动开发服务器。
-
打开
package.json文件，修改dev脚本："scripts": {"dev": "NODE_TLS_REJECT_UNAUTHORIZED=0 PORT=3000 next dev --https-key=key.pem --https-cert=cert.pem" }这里使用了环境变量
NODE_TLS_REJECT_UNAUTHORIZED=0来禁用对证书的验证，因为我们在开发环境中使用的是自签名证书。 -
启动开发服务器：
npm run dev或者使用 Yarn：
yarn dev
方法二：使用第三方工具
另一种方法是使用第三方工具，如 mkcert，来生成本地信任的证书。
安装 mkcert
-
安装 mkcert：
对于 Linux：
wget https://github.com/FiloSottile/mkcert/releases/download/v1.4.5/mkcert-v1.4.5-linux-amd64.tar.gz tar xf mkcert-v1.4.5-linux-amd64.tar.gz chmod +x mkcert-v1.4.5-linux-amd64 sudo mv mkcert-v1.4.5-linux-amd64 /usr/local/bin/mkcert对于 macOS：
brew install mkcert -
生成证书：
mkcert -install mkcert localhost这将会生成
localhost+3.pem（证书文件）和localhost+3-key.pem（密钥文件）。
配置 Next.js 开发服务器
-
修改
package.json文件中的dev脚本："scripts": {"dev": "NODE_TLS_REJECT_UNAUTHORIZED=0 PORT=3000 next dev --https-key=localhost+3-key.pem --https-cert=localhost+3.pem" } -
启动开发服务器：
npm run dev或者使用 Yarn：
yarn dev
注意事项
-
使用自签名证书仅适用于开发环境，生产环境中应使用受信任的证书颁发机构颁发的证书。
-
确保证书和密钥文件的路径正确无误。
-
在 macOS 上，您可能还需要信任证书：
sudo security add-trusted-cert -d -r trustAsRoot -k /Library/Keychains/System.keychain ~/.local/share/mkcert/rootCA.pem
通过上述方法之一，您可以在 Next.js 开发环境中启用 HTTPS 支持，这对于测试涉及安全传输的应用场景非常有用。希望这些步骤能帮助您成功配置 Next.js 开发服务器的 HTTPS 支持！