Next.js『port already in use』エラーの原因と解決方法【初心者向け】

React / Next.js

Next.js『port already in use』エラーの原因と解決方法【初心者向け】

Next.jsで開発環境を構築している際に、port already in useというエラーが発生することがあります。このエラーは初心者にとって焦りの原因になりやすいですが、原因と解決方法は実はシンプルです。この記事では、そのエラーが発生する理由から具体的な解決手順まで、わかりやすく説明します。

『port already in use』エラーの原因を理解しよう

Next.jsで開発環境を起動する際、デフォルトではポート3000番が使用されます。このエラーは、すでに他のプロセスがそのポート番号を使用しているために発生します。

エラーが発生する具体的な状況

  • 前回のNext.jsプロセスが残っている：アプリケーションを完全に終了せず、バックグラウンドで実行されている
  • 別のアプリケーションが同じポートを使用している：他の開発ツールやサービスがポート3000を占有している
  • 複数のNext.jsプロジェクトを同時に実行しようとしている：同じマシン上で複数のプロジェクトを起動しようとしている
  • プロセスが強制終了され、ポートロックが残っている：Ctrl+Cで強制終了した後、ポートが解放されていない状態

これらの状況では、ポート3000がすでに「使用中」の状態になっているため、新しいNext.jsプロセスが起動できないのです。

段階的な解決手順

ステップ1：現在のプロセスを確認する

問題を解決するには、まずどのプロセスがポート3000を使用しているかを確認する必要があります。使用しているOSによって、確認方法が異なります。

Windows環境での確認方法

Windows環境では、コマンドプロンプトまたはPowerShellを使用して確認します。

netstat -ano | findstr :3000

このコマンドを実行すると、ポート3000を使用しているプロセスIDが表示されます。出力例は以下のような形式です：

TCP    0.0.0.0:3000           0.0.0.0:0              LISTENING       12345

最後の数字「12345」がプロセスIDです。

Mac・Linux環境での確認方法

Mac・Linux環境では、lsofコマンドを使用します。

lsof -i :3000

このコマンドで、以下のような形式で情報が表示されます：

COMMAND   PID     USER   FD  TYPE DEVICE SIZE/OFF NODE NAME
node      12345   user   20u IPv4 123456 0t0     TCP localhost:3000 (LISTEN)

ステップ2：使用中のプロセスを終了する

確認したプロセスIDを使用して、そのプロセスを終了します。

Windows環境でのプロセス終了

taskkill /PID 12345 /F

/Fフラグは、プロセスを強制的に終了するオプションです。プロセスIDの部分を、実際に確認した番号に置き換えてください。

Mac・Linux環境でのプロセス終了

kill -9 12345

-9オプションは強制終了を意味します。こちらもプロセスIDを実際の番号に置き換えてください。

ステップ3：別のポートでNext.jsを起動する

もし複数のNext.jsプロジェクトを同時に起動したい場合や、他のアプリケーションがポート3000を使用している場合は、別のポート番号でNext.jsを起動できます。

npm run dev -- -p 3001

このコマンドでは、デフォルトのポート3000ではなく、ポート3001でアプリケーションが起動します。他の番号（3002、3003など）を使用することも可能です。

実践的なコード例

package.jsonでのカスタムスクリプト設定

毎回コマンドラインオプションを指定するのは面倒な場合、package.jsonでカスタムスクリプトを定義できます。

{
  "name": "nextjs-app",
  "version": "1.0.0",
  "scripts": {
    "dev": "next dev",
    "dev:3001": "next dev -p 3001",
    "dev:3002": "next dev -p 3002",
    "build": "next build",
    "start": "next start"
  },
  "dependencies": {
    "next": "^14.0.0",
    "react": "^18.0.0",
    "react-dom": "^18.0.0"
  }
}

このように設定すれば、npm run dev:3001コマンドで簡単にポート3001で起動できます。

環境変数を使用したポート設定

.envファイルを使用して、ポート番号を管理することもできます。


PORT=3000

そして、next.config.jsでこの環境変数を読み込みます。

// next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
  // 環境変数の設定がここに来る
};

module.exports = nextConfig;

複数プロジェクトの同時実行スクリプト

複数のNext.jsプロジェクトを同時に開発する場合、別々のターミナルウィンドウで異なるポート番号で起動します。


cd project1
npm run dev


cd project2
npm run dev -- -p 3001

よくある間違いと対策

間違い1：エラーメッセージをよく読まずに再起動を繰り返す

多くの初心者は、エラーが出るたびに何度もnpm run devを実行してしまいます。しかし根本的な原因（プロセスが残っている、ポートが使用中）を解決しないと、何度実行しても同じエラーが出ます。必ず、どのプロセスがポートを使用しているかを確認してから対応してください。

間違い2：ランダムなポート番号を選ぶ

別のポートで起動する際、存在しないポート番号を選ぶことは問題ありませんが、できれば3000番台の連続した番号（3001、3002など）を選ぶことをお勧めします。これにより、複数のプロジェクトを管理する際に混乱が少なくなります。

間違い3：プロセスの完全な終了を確認しない

プロセスを終了したつもりでも、実際には終了していない場合があります。特にWindows環境では、taskkillコマンドで終了した後も、ポートロックが残ることがあります。その場合は、マシン全体の再起動が有効です。


netstat -ano | findstr :3000

このコマンドを実行して、「LISTENING」状態のプロセスがなくなったことを確認してください。

間違い4：ファイアウォール設定を忘れる

ファイアウォール設定によっては、特定のポートが通信ブロックされていることもあります。開発環境で必要なポートについては、ファイアウォール設定を確認することも大切です。

トラブルシューティングの全体フロー

以下の流れに沿って対応すれば、ほぼすべての「port already in use」エラーを解決できます：

  1. netstat -ano | findstr :3000（Windows）またはlsof -i :3000（Mac/Linux）でポート状態を確認
  2. LISTENINGプロセスが表示されたら、そのプロセスIDを確認
  3. taskkill /PID [ID] /F（Windows）またはkill -9 [ID]（Mac/Linux）でプロセスを終了
  4. 再度ポート状態を確認して、LISTENINGプロセスが消えたことを確認
  5. npm run devでNext.jsを起動
  6. もしポート3000で起動できなければ、npm run dev -- -p 3001で別ポートで起動

予防策：今後のエラーを防ぐために

1. 正しい終了方法の習慣化

Next.jsの開発サーバーを終了する際は、常にCtrl+Cを使用して正常終了させてください。ターミナルウィンドウをいきなり閉じるのは避けましょう。

2. 定期的なポート確認

開発環境が不安定になったら、定期的にポート状態を確認する習慣をつけます。これにより、問題を早期に発見できます。

3. スクリプト化による自動管理

複数のプロジェクトを管理する場合、package.jsonに複数のスクリプトを定義することで、ポート管理を自動化できます。

4. Docker環境の検討

本格的な開発環境では、Dockerを使用することで、ポートの競合を根本的に解決できます。各プロジェクトを独立したコンテナで実行すれば、ホストマシンのポート管理が簡潔になります。

まとめ

Next.jsで「port already in use」エラーが発生した場合、その原因はシンプルです。別のプロセスがすでに指定したポート番号を使用しているだけなのです。

主な解決方法：

  • 現在のプロセスを確認（netstat/lsofコマンド）
  • 使用中のプロセスを終了（taskkill/killコマンド）
  • 別のポート番号でNext.jsを起動する

複数のプロジェクトを同時に開発する場合は、最初から異なるポート番号を使用することで、このエラーを予防できます。package.jsonにスクリプトを定義しておけば、ポート管理が簡単になり、開発効率が向上します。

このエラーは初心者がよく遭遇する問題ですが、原因と解決方法を理解すれば、今後は素早く対応できるようになります。焦らず、段階的に対応することが大切です。

タイトルとURLをコピーしました