はじめに
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のスクリプトに記述しておくと便利