● npm run dev で起動する開発サーバーのnext.js アプリを https で起動する

package.json に dev:https コマンドを追加

package.json

  "scripts": {
    "dev": "next dev",
    "dev:https": "next dev --experimental-https",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },

npm run dev:https

https://localhost:3001 にアクセスできることを確認します。

以上です。簡単ですね。

● npm run start で起動する開発サーバーのnext.js アプリを https で起動する

mkcert のインストール

brew install mkcert

現在の設定を見る

security dump-trust-settings

現時点で何も作成されていなければ、次のように帰ってきます

SecTrustSettingsCopyCertificates: No Trust Settings were found.

mkcert localhost　で証明書の発行

mkcert localhost

The certificate is at "./localhost.pem" and the key at "./localhost-key.pem" ✅

next.js を起動

npm run build
npm run start

まずは http://localhost:3000/ アクセスできることを確認しておきます。

プロキシを起動

cd
npx local-ssl-proxy  --key localhost-key.pem  --cert localhost.pem  --source 3001  --target 3000

Started proxy: https://localhost:3001 → http://localhost:3000

アクセスの確認

https://localhost:3001 にアクセスできることを確認します。 以上です。

● npm run start で起動する開発サーバーのnext.js アプリを https://my-custom-hostname.local/ のような任意のホスト名で起動する

sudo vi /etc/hosts

127.0.0.1   my-custom-hostname.local

Macを再起動しておきます。

あとは次のコマンド実行します。

mkcertの作成

cd
mkcert my-custom-hostname.local

next.js の起動

npm run build
npm run start

プロキシの起動

cd
npx local-ssl-proxy  --key my-custom-hostname.local-key.pem  --cert my-custom-hostname.local.pem  --source 3001  --target 3000

アクセスの確認

http://my-custom-hostname.local:3000/ への アクセスを確認します
https://my-custom-hostname.local:3001/ への アクセスを確認します