run npm devでlocalhostに接続できない【next.js / Mac】

状況

npm run devでlocalhost:3000に接続しようとしたら、
サーバーは立ち上がるのですが、以下の画面が出てアクセスできませんでした。

# サーバーは立ち上がっているが...
$ npm run dev

> ga4-test@0.1.0 dev
> next dev

  ▲ Next.js 14.2.3
  - Local:        http://localhost:3000

 ✓ Starting...
 ✓ Ready in 3.6s

localhostにアクセスできない！！

開発環境

• MacOS 14.5 (Sonoma)
• Chromium(Chrome / Arc)
• nodejs 22.3.0
• npm 10.8.1
• next 14.2.4

解決方法

localhost:3000ではなく、127.0.0.1:3000にアクセスすると、

無事に画面が表示されます...　なんでや！？

原因＆根本解決

原因は、Next(React)のホストが、httpで開かれていたためでした。
Chromium系（Chrome / Arcなど）はhttpsでないと受け付けないそうです。

そこで、package.jsonのscriptsのdev部分を書き換えると、問題なくhttpsで起動できるようになります。
デフォルトそれだろ！！

package.json

{
  "name": "ga4-test",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "// ここに、 '--experimental-https'を付け足してください"
    "dev": "next dev --experimental-https",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
}

この状態でnpm run devをすると...

npm run dev

> ga4-test@0.1.0 dev
> next dev --experimental-https

 ⚠ Self-signed certificates are currently an experimental feature, use with caution.
   Attempting to generate self signed certificate. This may prompt for your password
   CA Root certificate created in /Users/kiichi/Library/Application Support/mkcert
   Certificates created in /Users/kiichi/workspace/sandbox/ga4-test/certificates
   Adding certificates to .gitignore
  ▲ Next.js 14.2.4
  - Local:        https://localhost:3000

 ✓ Starting...
 ✓ Ready in 2.4s

無事にhttpsで立ち上がっているのが確認できます！

参考資料

railsの記事でしたが、以下を足がかりにしました。
「Next.js」で検索していると、一生見つけられなかったです...
少しでも僕と同じ魂が救われますように...🙏