NextJSにおけるCSSモジュール

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

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

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

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

.text {
	color: blue;
}

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

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

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

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

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

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

CSSモジュールを使用してコンポーネントをスタイリングしてください。