はじめに
Next.js × TypeScript で開発中のアプリを Vercel にデプロイしようとしたところ、ローカル（Windows）ではビルド成功、Vercel では失敗という現象に遭遇しました。
結論から言うと、エラーの原因は Git が大文字・小文字だけのファイル名の変更を検出してくれなかったことでした。
発生したエラー
Vercel のデプロイログに以下のようなエラーが出力されていました。
Module not found: Can't resolve '@/components/header'
確認したこと
✅ ファイル名を間違えていないか（大文字・小文字の違いはないか）
✅ import のパスを間違えていないか
✅ ローカル環境ではビルドできている
「合っているはず...」と思いつつ、思い当たることが一つ。
直前にファイル名を大文字から小文字に変更していたことを思い出し、そこが怪しいと考えました。
背景と原因
✅ ファイル名を変更したつもりだった
-
コンポーネントファイル名
Header.tsxをheader.tsxに変更 -
import 文も
@/components/headerに統一しかし...
❌ Git は変更を検知していなかった
- Windows はデフォルトで大文字・小文字を区別しないファイルシステム（NTFS など）
- Git も「変更なし」と判断して差分を記録せず
⇒ Vercel（Linux・大文字小文字を区別する環境）では Header.tsx を読み込もうとしてビルドエラーに
解決方法
ちゃんとファイル名の変更を Git に認識させる
1. 一旦ファイル名を別名に変更（中間名）
git mv src/components/Header.tsx src/components/Header_temp.tsx
2. 目的の小文字ファイル名に戻す
git mv src/components/Header_temp.tsx src/components/header.tsx
3. コミットしてデプロイ
他の選択肢：core.ignorecase を false にする方法（おすすめしない）
Git には core.ignorecase という設定があり、これを false に設定すると
大文字・小文字の違いも厳密に追跡されるようになります。
git config core.ignorecase false
この方法を使えば、Header.tsx → header.tsx のような変更も Git が認識できるようになりますが、以下の理由から今回は採用しませんでした。
おすすめしない理由
- 既に大文字、小文字違いのファイルが存在する場合に競合が発生する可能性がある。
- チーム開発環境で、他のメンバーの Git 設定や OS によって挙動が変わる可能性があり、「自分の環境では動く」状態が発生しやすい。
- ローカルで設定を変更して作業を続けると、意図しない差分が発生する恐れがある。
ちなみに現在の設定は以下コマンドで確認できます。
git config --get core.ignorecase
まとめ
- Windows では大文字・小文字だけのファイル名変更は Git が無視することがある（ファイル名の変更だけで、内容が変わらなかった場合など）。
- Vercel（Linux）では大文字・小文字を区別するため、ビルドエラーになる。
- 対応策は git mv を使って変更を明示的に伝えること！
- core.ignorecase の変更も一応の方法だが、副作用が多く安全性に欠けるため推奨しない。
オブジェクティブグループでは X の投稿も平日毎日行っています！
IT 関連の小ネタや便利技から、日常のアニメ・ゲーム布教なども幅広く投稿してるので、
ご興味のある方は是非フォロー・いいねをお願いします。