NextJSにおけるCSSモジュール

NextJSには、CSSモジュールのサポートが最初から組み込まれています。 これらは個別のCSSファイルであり、クラス名がローカルスコープ内にあるため、 異なるコンポーネント間でのクラス名の衝突を避けることができます。

それでは、使い方を見てみましょう。 あるコンポーネントがあるとします：

app/test/page.jsxexport default function Test() {
  return <p>
    text text text
  </p>;
}

このコンポーネント用のCSSモジュールを作成しましょう。 そのためには、同じフォルダ内に .module.cssという拡張子と任意の名前の ファイルを作成します。その中に次のCSSクラスを記述します：

app/test/test.module.css.text {
  color: blue;
}

コンポーネントファイルにCSSモジュールをインポートします：

app/test/page.jsximport styles from './test.module.css';

export default function Test() {
  return <p>
    text text text
  </p>;
}

次に、コンポーネント内の段落にCSSクラスを適用しましょう：

app/test/page.jsximport styles from './test.module.css';

export default function Test() {
  return <p className={styles.text}>
    text text text
  </p>;
}