こんにちは。

Next.jsの基本的な部分になりますが、初心者の方は意外とぶつかりやすい内容かと思いますので参考になれば幸いです。

結論

ではまず結論からですが、「CSSファイルに該当のclassNameを記載していない」事が原因となります。

 <section className={styles.hero}>
 </section>

例えば上記のように書けば、通常のHTMLの感覚であれば以下のように出力されることを期待しますよね。

 <section class="hero">
</section>

Next.jsの場合、CSSにちゃんと.heroの記述をしてあげないとブラウザに反映されない仕様になっています。

なぜこのような仕様になっているか？

Next.jsでは、

import styles from './xxx.module.css' 

のようにCSS Moduleを使ってスタイルを読み込む場合、クラス名はローカルスコープに変換されて適用される仕組みになっています。

これにより、グローバルでクラス名が競合してスタイルが崩れることを防ぐことができます。

たとえば、以下のようにCSS Modulesを記述した場合

/* styles.module.css */
.hero {
  background-color: #f0f0f0;
  padding: 2rem;
}

そしてコンポーネント側で以下のように使うと

import styles from './styles.module.css';

export default function Home() {
  return <section className={styles.hero}></section>;
}

実際にブラウザに出力される HTML は以下のようになります。

<section class="styles_hero__1a2b3">
</section>

このように自動的にユニークなクラス名（styles_hero__1a2b3 のような）に変換されており、CSS に該当のクラスが定義されていなければそもそも出力されないというのが仕様です。

よくある間違いについて

①className={styles.hero} と書いたのに styles.module.css に .hero {}が定義されていない

この場合、クラスが空とみなされ、ブラウザには何も出力されない形となります。

②className="hero" のように 文字列として 書いてしまう

この場合、CSS Modulesを使っていない時の書き方なので、読み込んだ stylesとは関係なくなってしまいます。

③CSSファイルをそもそもimportし忘れている

まとめ

Next.js（特にCSS Modules）では、該当クラスが CSS に存在していないとclassNameとして反映されないという仕様になっています。

もし classNameが反映されない場合は、以下の3点をチェックしてみましょう！

①CSS Module ファイルに .hero {} のような定義があるか

②import styles from './xxx.module.css'で正しく読み込まれているか

③JSX 側で className={styles.hero} と記述しているか

というわけで本日の記事は以上となります！