はじめに

Next.js で開発していると、npm run dev を実行した際に、以下のように localhost 以外に ローカルネットワーク経由でアクセス可能なアドレス が表示されることがあります。

Local: http://localhost:3000
Network: http://192.168.xx.xx:3000

これは便利な反面、社内ネットワーク内で他の端末からもアクセスできてしまうため、意図しないアクセスを防ぎたい場合には不要です。

本記事では、Next.js（Turbopack 使用時）でこの **Networkアドレスを localhost のみに変更する方法を記述します。

対象環境

Next.js 15 以降（最新版）
Turbopack 使用（next dev --turbopack）
npm run dev または pnpm run dev で起動しているプロジェクト

解決方法は `--hostname localhost` を指定するだけ！

package.json の scripts 内で dev コマンドを以下のように変更します。

変更前：

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

変更後：

"scripts": {
  "dev": "next dev --turbopack --hostname localhost",
  "build": "next build",
  "start": "next start",
  "lint": "next lint"
}

変更した結果

上記の変更により、npm run dev 実行時には以下のように、Network でも http://localhost:3000 が適用されるようになります。

> next dev --turbopack --hostname localhost

   ▲ Next.js 15.3.2 (Turbopack)
   - Local:        http://localhost:3000
   - Network:      http://localhost:3000

こうすることで、開発サーバーが自端末限定で動作するようになります。
--hostname localhost を指定することで、ホスト名が localhost のみに限定され、外部からのアクセスを遮断できるので、開発環境は自分の PC でのみ行う際は予め設定しておくと良いかもしれません。

まとめ

next dev はデフォルトで LAN 内の他端末からアクセス可能な Network アドレスを表示する
--hostname localhost を指定することで、自身の PC 限定の開発環境にできる
package.json のスクリプトに記述しておくと便利