【Next.js】仮想環境でnext devしたときにホストマシンから見られるようにする方法

VMwareなどで構築した仮想環境上でnext devを実行し、意気揚々とlocalhost:3000にアクセスしたところ、接続できずに「あれ？」と思うことがありますよね。

--hostnameオプションを使用する

pnpm dev --hostname 0.0.0.0

こうすれば、http://{仮想環境のipアドレス}:3000で見られるようになります。

仮想環境のIPアドレスってどうやって確認するんだっけ？

hostname -I

これで確認できます。

ん？

package.json

{
  "scripts": {
    "dev": "next dev --hostname $(hostname -I)",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "check": "pnpm biome check --write ."
  },
}

じゃあもうこれでいいっすね。
こうするとnext devしたときにちゃんとURLが表示されて楽です。