CSS が反映されないとき。どこで読み込むか

CSS は、import した場所で読み込まれる

Next.js は、ページごとに、そのページで使う CSS だけを HTML に読み込ませます。「そのページで使う」とは、そのページと、それを包む layout が import したものです。

3つのページで確かめました。

app/layout.tsx     import './globals.css'      ← h1 の色
app/a/page.tsx     import './a.css'            ← .accent の色
app/b/page.tsx     （import なし）              ← .accent を使っている

/b の .accent には色が付きませんでした。a.css の中身は全体に効く書き方ですが、読み込まれるのは a.css を import した /a を開いたときだけです。

全ページで使う CSS は、ルートの layout で

// app/layout.tsx
import './globals.css'
 
export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="ja">
      <body>{children}</body>
    </html>
  )
}

どのページもルートの layout の内側に描かれるので、ここで import した CSS はすべてのページに届きます。実機で、/b を直接開いても h1 に globals.css の色が付きました。

CSS Modules はクラス名が変わる

ファイル名を .module.css で終わらせると、CSS Modules になります。ほかのファイルと名前が混ざらないように、クラス名が書き換えられます。

import styles from './m.module.css'
 
<p className="title">見出し</p>

import styles from './m.module.css'
 
<p className={styles.title}>見出し</p>

実機では、.title が m-module__haHm7G__title のような名前に変わっていました。文字列の "title" の要素は既定の色のまま、styles.title の要素にだけ色が付きました。

書き換えたあとの名前の形は、版によって変わり得ます。名前を直接書かず、いつも styles から取り出してください。

このページで扱わないもの

Tailwind CSS のような道具が反映されない場合は、その道具の設定を確かめてください。Next.js の外の道具なので、このサイトでは扱いません。ここに書いたのは、Next.js 16.3.5 で確かめた範囲だけです。

確かめ方

1. 本番と同じビルドで、そのページを直接開く
2. 開発ツールの要素のタブで、要素に当たっているクラス名と、読み込まれた CSS を見る
3. CSS Modules なら、当たっているクラス名が書き換えたあとの名前になっているかを見る