react nextJs css module or scoped css

with convention you should name module.css like

productcard.module.css and them import that css as

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

and then you can use this css like

Note: donot use css classes with name with hypen – as css classes are properties of javascript object style, which cannot have hypen.

assuming that you have a class as card in ProductCard.module.css.

<div className={styles.card}>product</div>