はじめに
Next.jsの next export を使ってXServerにデプロイしている構成で、本番環境でページが白紙になる問題に遭遇しました。
原因の特定と再発防止のための対応をまとめます。
問題：開発環境では動くのに、本番公開後に白紙画面になる
症状
-
npm run devでは正しく表示される - 本番ビルドして
out/を XServer にアップすると、ページが真っ白 - Chrome DevTools では以下のようなエラー：
https://example.com/_next/static/chunks/517-xxxx.js net::ERR_ABORTED 404 (Not Found)
原因：.next/ が更新されていなかった、または out/ に古いJSが残ったままだった
Next.jsでは、ビルド時に .next/ 配下にJSファイルが生成され、それが next export により out/_next/static/ にコピーされます。
しかし、.next/ が更新されていないまま export を実行すると、古いJSファイルがそのまま出力されてしまい、本番で404が発生します。
解決方法：ビルド前に .next/ を削除して再出力
# 本番用ビルド手順（.env.production は事前に用意）
rm -rf .next
dotenv -e .env.production -- next build
npx next export
.next/ を削除することで、毎回新しい chunks/ が出力されるようになります。
再発防止のために
- CI（GitHub Actionsなど）では
dangerous-clean-slate: trueの使用を検討 -
FTP-Deploy-Actionを使う場合は_next/を除外しないよう注意 - デプロイ前後で
_next/static/chunks/に新しいJSファイルが存在するか確認
まとめ
静的出力を前提とする next export では、ビルド結果とexport結果の整合性が極めて重要です。
今回のような「白紙＆JS 404」はそのズレが原因でした。
静的デプロイ運用時には、rm -rf .next を習慣にしておくと安全です。