Windowsの場合WSL(WindowsでLinuxの環境が作れる便利なサービス)でコマンド

エディタのターミナルでメニュータブからUbunts(LinuxのOSの一種)を選択

問題 出力 デバッグ コンソール ターミナル ポート GitLens + root@LAPTOP-2C4PL9J8:/mnt/c# node wsl /941

Ubuntsではコピーは右クリックで

npm install -g @anthropic-ai/claude-code

WSL上にNode.jsがインストールされていないと「node: not found」となります

Node.jsをインストールします

# ホームディレクトリに移動
cd ~

# Node.js のインストール(セットアップスクリプトのインストール、本体をインストール)
curl -fsSL https://deb.nodesource.com/setup_18.x | sudo -E bash -
sudo apt install -y nodejs

# 確認
node -v
npm -v

# これで OK なら
npm install -g @anthropic-ai/claude-code

Claude Codeを起動する

claude
Welcome to Claude Code Let’s get started. Choose the text style that looks best with your terminal: To change this later, run /theme 1. Dark mode 2. Light mode 3. Dark mode (colorblind-friendly) 4. Light mode (colorblind-friendly) 5. Dark mode (ANSI colors only) 6. Light mode (ANSI colors only) Preview 1 2 3 function greet () { console.log( “Hello, World !” ); // console.log(“Hello, Claude!”); }

【まとめ】Next.js ローカル開発中に「白画面」や「EPERM」エラーが出たときの対応

◆ 発生しやすい状況

  • WSL と Windows の開発環境が混ざっている
  • WSL 上で触ったファイル(.nextnode_modules)の権限が Linux 標準になる
  • Windows 側でそれらを削除・実行しようとして EPERM エラーになる
  • 結果として、Next.js サーバーは起動してもブラウザに何も表示されず白画面になる

◆ 解決の基本方針

  • 開発環境は「Windows」か「WSL」のどちらかに統一する
  • それでも白画面になる場合は、以下の手順で復旧を試す

◆ 復旧手順

  1. PowerShell(管理者)を開く
  2. 以下を順に実行する
rimraf .next node_modules package-lock.json
npm cache clean --force
npm install
npm run dev
  1. これで直らない場合は、PCを再起動する

◆ 再起動が有効な理由

  • 削除したはずの .next/tracenode_modules の一部が、バックグラウンドプロセスにロックされたまま残っている
  • 特に dllhost.exenode.exe が影響していることが多い
  • 再起動によってこれらのプロセスが完全に終了し、ロックが解除される

◆ 予防策

  • ファイルを WSL 内で触るなら、そのまま WSL 内で開発を完結させる
  • Windows 上で作業したいなら、C:\Users\xxx\project のような Windows 側のパスにコードを置き、WSL は使わない
  • 両方を混ぜないように意識することが、トラブルを防ぐ最大のポイント