NextJS入門：トラブルシューティング：よくある問題と解決方法

Error: listen EADDRINUSE: address already in use :::3000

# 別のポートで起動（推奨）
npm run dev -- -p 3001

# または使用中のプロセスを確認・停止
# Mac/Linux
lsof -ti:3000 | xargs kill -9

# Windows (PowerShell)
Get-Process -Id (Get-NetTCPConnection -LocalPort 3000).OwningProcess | Stop-Process

You are using Node.js 16.14.0. For Next.js, Node.js version >= 18.17.0 is required.

# Node.jsのバージョン確認
node --version

# nvm（Node Version Manager）を使用してアップデート
# インストール後
nvm install --lts
nvm use --lts

# n（Node.js version management）を使用
npm install -g n
n latest

# 公式サイトから直接インストールも可能

# Next.jsのキャッシュをクリア
rm -rf .next
npm run dev

# node_modulesも含めて完全リセット（強力）
rm -rf .next node_modules package-lock.json
npm install
npm run dev

# Windows（PowerShell）の場合
Remove-Item -Recurse -Force .next
Remove-Item -Recurse -Force node_modules
Remove-Item package-lock.json
npm install

Module not found: Can't resolve 'lodash'
Cannot find module 'lodash' or its corresponding type declarations

# パッケージの再インストール
npm install lodash

# TypeScript用の型定義も必要な場合
npm install --save-dev @types/lodash

# インポートパスを確認
import _ from 'lodash'  // 正しい
import _ from './lodash'  // 間違い

ReferenceError: window is not defined
Error: process is not defined

// ブラウザ専用のコードはuseEffectで実行
import { useEffect, useState } from 'react'

export default function Component() {
  const [mounted, setMounted] = useState(false)

  useEffect(() => {
    setMounted(true)
    // ブラウザ専用のコードをここに記述
    console.log(window.location.href)
  }, [])

  if (!mounted) return null

  return <div>コンテンツ</div>
}

// CSS Modulesの正しい使用法
import styles from './Component.module.css'

export default function Component() {
  return <div className={styles.container}>コンテンツ</div>
}

/* Component.module.css */
.container {
  background-color: blue;
}

# TypeScript設定を再確認
npx tsc --noEmit

# Next.jsの型定義を再生成
rm -rf .next
npm run dev

// next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
  // WSL2環境での設定
  webpack: (config) => {
    config.watchOptions = {
      poll: 1000,
      aggregateTimeout: 300,
    }
    return config
  },
}

module.exports = nextConfig