どうもこんにちは、たくびー(@takubii)です。
Next.jsプロジェクトを作成して開発サーバーを起動する時のポートの変更方法を調べたので共有したいと思います。
デフォルトの挙動
$ npm run dev
上記のコマンドで起動するとport3000でlocalhostが起動すると思います。
起動ポートの変更方法
package.jsonのscriptsセクションで以下のように指定するとポートを変更することができます。
"scripts": {
"dev": "next dev -p 3030",
}
この状態でnpm run devを打ってみると開発サーバーは以下のようなURLで開くと思います。
終わりに
複数のNext.jsプロジェクトで開発サーバーを起動しながら作業したいという場面に出くわした際に、ポートの衝突で同時に1つしか画面が見られないことがありました。
そのような場合に上記の手順で起動ポートを変更すれば複数の画面を見ながら開発することができます。
簡単な内容ですがお役に立てていただければ幸いです。