Next.js + CSS Modules の class の指定方法

Next.js における CSS Modules の書き方の色々をまとめる。

環境

• Next.js v15
• TypeScript v5
• Sass v1

class="" → className={}

• class は className に変更
• 文字列リテラルは { } に変更

NG
<div class="test">hello</div>

OK
<div className={ `test` }>hello</div>

CSS Modules

import styles from "page.module.scss"

function Page() {
	return (
		<>
			<div className={ styles.test }>hello</div>
		</>
	)
}

page.module.scss

.tset {
	color: #046;
}

ハイフンを扱う時

import styles from "page.module.scss"

function Page() {
	return (
		<>
			NG
			<div className={ styles.test-sample }>hello</div>

			OK
			<div className={ styles["test-sample"] }>hello</div>
		</>
	)
}

複数指定

import styles from "page.module.scss"

function Page() {
	return (
		<>
			<div className={ `${styles.test} ${styles.test2}` }>hello</div>
		</>
	)
}

変数

import styles from "page.module.scss"

type size = "small" | "medium" | "large"

function Page() {

	let size = "small"

	return (
		<>
			<div className={ styles[size] }>hello</div>
		</>
	)
}