CSS Modules in NextJS

NextJS has built-in support for CSS Modules. They are separate CSS files where class names are in the local scope, which helps avoid conflicts between class names from different components.

Let's see how to use them. Suppose we have some component:

app/test/page.jsxexport default function Test() {
  return <p>
    text text text
  </p>;
}

Let's create a CSS Module for it. To do this, in the same folder create a file with the extension .module.css and an arbitrary name. In it, write the following CSS class:

app/test/test.module.css.text {
  color: blue;
}

Import our CSS module into the component's file:

app/test/page.jsximport styles from './test.module.css';

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

And now apply the CSS class to the paragraph inside our component:

app/test/page.jsximport styles from './test.module.css';

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