CSSモジュールとは
Next.jsのCSSモジュールは、コンポーネントごとにスコープが分離されたスタイルを適用するための方法です。CSSモジュールでは、各コンポーネントのスタイルが他のコンポーネントに影響を与えることなく、安全かつ予測可能な方法で定義されます。
CSSモジュールを使用すると、各コンポーネントのスタイルがローカルなスコープ内に閉じられます。各クラス名は自動的に一意の名前に変換され、グローバルな名前空間を汚染することなく、スタイルを適用できます。
#使用方法
Next.jsでCSSモジュールを使用するためには、次の手順に従います：
1. コンポーネントごとにCSSファイルを作成します。ファイル名は [name].module.css の形式にする必要があります。たとえば、Button.module.css のような名前のファイルを作成します。
2. CSSファイル内でスタイルを定義します。通常のCSSと同様に、スタイルを定義しますが、クラス名はローカルなスコープ内でのみ有効です。例えば、Button.module.css ファイル内で次のようにスタイルを定義します：
/* Button.module.css */
.button {
background-color: #007bff;
color: #fff;
border: none;
padding: 10px 20px;
border-radius: 5px;
}
.button:hover {
background-color: #0056b3;
}
コンポーネントでCSSモジュールをインポートして、スタイルを適用します。例えば、Button コンポーネントで Button.module.css をインポートしてスタイルを適用します。
// Button.js
import styles from './Button.module.css';
function Button() {
return <button className={styles.button}>Click me</button>;
}
export default Button;
#まとめ
CSSモジュールを使用することで、コンポーネントごとにスタイルを管理し、予期せぬスタイルの競合を回避することができます。これは、Next.jsなどのコンポーネントベースのフレームワークで特に便利です。