🚪

【Next.js】npm run devを特定ポート固定で起動する方法

2024/07/25に公開

Next.jsでnpm run devを実行するとき、基本はhttp://localhost:3000/で開くことができると思います。

ただ並行して2つの開発を行いたい時に、http://localhost:3000/http://localhost:4000/のようにしたかったのでその方法メモです。

【方法】package.jsonの設定

package.jsonに下記記載するとポートが指定できました。
例ではポートを4000に指定しています。

// package.json
{
  "scripts": {
    "dev": "next dev --port 4001"  // ←'4000'で指定
  }
}

【おまけ】VSCodeのdevcontainerを使用する場合

devcontainer.jsonforwardPortsでポートを指定します。
またここで指定するポートはpackage.jsonのポートと一致させる必要があります。

// devcontainer.json
{
  ...,
  "forwardPorts": [4000]  // ホストマシンの4000をフォワードするように指定
}

Discussion