Next.js の画面を直して vercel --prod で本番に出しました。開いてみると、文言やレイアウト（tsx 側の変更）は新しくなっているのに、globals.css に足した色とクラスだけが効いていません。エラーは出ず、画面は「少し変わった」ように見えるので、最初は直し方が足りないのかと思ってコードを見直していました。
原因（分かった範囲）
デプロイのログに Restored build cache と出ていました。前回のビルドキャッシュを使ったビルドで、globals.css の変更が CSS の出力に入っていなかったと見ています。
手元の next dev（Turbopack）でも同じ症状が出ました。こちらは globals.css を touch して開発サーバーを立ち上げ直したら直りました。どちらもキャッシュが globals.css の変更を拾っていなかったと考えていますが、仕組みの切り分けまではしていません。
直し方1：キャッシュを使わずに出し直す
Vercel CLI の --force を付けると、ビルドキャッシュを使わずにビルドします。
vercel --prod --yes --force
ログに Restored build cache が出ていないことも確かめます。
直し方2：本番の CSS に入ったかを curl で見る
画面を目で見るだけだと「変わった気がする」で終わってしまうので、本番の HTML から CSS のファイルを拾い、足したクラス名や色の値が入っているかを grep します。
URL=https://example.com
# HTML に書かれている CSS のパスを拾う
for css in $(curl -s "$URL" | grep -o '/_next/static/[^"]*\.css' | sort -u); do
# 足したクラス名（例：.my-new-surface）が入っていれば表示される
curl -s "$URL$css" | grep -o '\.my-new-surface[^}]*}' && echo "入っている: $css"
done
何も出なければ、本番の CSS にはまだ入っていません。
直し方3：手元の開発サーバーで同じ症状が出たら
globals.css を touch してから開発サーバーを止めて立ち上げ直します。直らなければ .next を消してから立ち上げます。
touch app/globals.css
rm -rf .next # それでも直らないとき
まとめ
- tsx は新しいのに globals.css の変更だけ効いていない、という出方をする。エラーは出ない
- globals.css を触ったデプロイは
vercel --prod --forceでキャッシュを使わずに出す - 反映したかは画面ではなく、本番の CSS を curl して足したクラス名で確かめる
生成AI（Claude Code）に書かせて一人で会社を回している記録を note に書いています。
https://note.com/kaito_cometa