※この記事は Issue #61228 「Running next build breaks next dev server」からの引用・要約です。日々同じ事故に当たっている人向けのメモ。

何が壊れているのか

.next フォルダは dev も build も共通
next build は .next/* を “掃除→本番用に再生成” する
dev サーバーが参照していたファイルが一瞬で消える → Cannot find module './638.js' などの 404／ENOENT でクラッシュする(github.com)

解決：同じ .next 内でサブディレクトリを分けるだけ

// next.config.js 版 (CJS)
module.exports = {
  distDir: process.env.NODE_ENV === 'development'
    ? '.next/dev'   // next dev 用
    : '.next/build' // next build 用
};

他のファイル形式

形式	サンプル
next.config.mjs	`js\nexport default {\n distDir: process.env.NODE_ENV === 'development'\n ? '.next/dev'\n : '.next/build',\n};\n`
next.config.ts*	`ts\nimport { type NextConfig } from 'next';\nconst config: NextConfig = {\n distDir: process.env.NODE_ENV === 'development'\n ? '.next/dev'\n : '.next/build',\n};\nexport default config;\n`

* TypeScript の場合、生成された型ファイルを拾うよう tsconfig.json に
"include": [
  ".next/build/types/**/*.ts",
  ".next/dev/types/**/*.ts"
]
を追加しておくと IDE エラーを防げる(github.com)

これで .next というルートは共通のまま、環境ごとに .next/dev と .next/build が共存し、上書き競合がなくなる。記述しているのはNext.js の distDir オプション(nextjs.org)。

動作確認手順(npm)

# ターミナル A
npm run dev      # or yarn dev / pnpm dev

# ターミナル B
npm run build    # or yarn build / pnpm build

# ブラウザをリロード → エラーが出なければok

Turbopack モード (next dev --turbo) では 2024-07-04 時点で
まだ ENOENT が起きる報告あり (github.com)。

SEO 用

他のパッケージマネージャー使ってて引っかからない人がイないようにメジャーなモノを書いておきます。

npm run build next dev エラー
yarn build すると開発サーバー落ちる
pnpm build Cannot find module './638.js'
next build next dev 同時 実行 できない

同じ症状なら distDir を環境で分割するだけで終わります。お試しあれ！