[Next.js] 本番環境だけスタイル(CSS)がおかしい時の確認事項

Next.jsで作っているサイトで、本番環境だけスタイル(CSS)がおかしくなったことがありました。ローカル環境では正常に表示されていました。

DevToolsでスタイルを見ると、CSSの読み込みが正常にできていないようでした。少し前に操作した内容を覚えていたので、その辺りを調査してみました。

不具合を解消するためにやったこと

少し前にglobals.cssファイルをstylesフォルダに移動していたので、元の位置に戻しました。

/styles/globals.css → /app/globals.css

shadcn/uiをインストールした時に生成されたcomponents.jsonのcssのファイル名が異なっていたので修正しました。

// ...
  "tailwind": {
    "config": "tailwind.config.ts",
    "css": "app/globals.css", // ここが違う名前(globals-test.css)になっていた
    "baseColor": "neutral",
    "cssVariables": true,
    "prefix": ""
  },
// ...

おわりに

色々触りすぎると不具合が発生した時に原因を突き止めにくくなるので、Next.jsに慣れるまでは余計なことをしないようにしたいです。