CSS Modules works with Next.JS out of the box.
Cannot have hyphens in classNames so site-Header__menu-icon so use camelCase (underscores are okay).
Also need to wrap classNames in curly brackets and prefix with styles.whatEvs. This is very annoying especially if you are bringing in functionality from vanilla HTML and converting.
It is better than using basic CSS (with say BEM or SASS). Helps scope styles to your components by giving automatically giving unique class name.
Can still use CSS variables by declaring them in a global.css file and then referencing the. In the YourComponent.module.css file.
`${styles.container} ${styles.yellow}`With a ternary it can get ugly
{props.isSuccess ? styles.container : `${styles.container} ${styles.container__error}`