How to Use CSS Modules in Nextjs?

CSS Modules

Create a CSS Module file: In your component’s directory, create a CSS file with the .module.css extension. For example, styles.module.css:

.title {
  color: blue;
  font-size: 24px;
}

.subtitle {
  color: gray;
  font-size: 16px;
}

Use the CSS Module in your component: Import the CSS Module into your component and use the generated class names:

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

const MyComponent = () => (
  <div>
    <h1 className={styles.title}>Hello, World!</h1>
    <p className={styles.subtitle}>This is a subtitle.</p>
  </div>
);

export default MyComponent;

Use the CSS Module in your component: Import the CSS Module into your component and use the generated class names:

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

const MyComponent = () => (
  <div>
    <h1 className={styles.title}>Hello, World!</h1>
    <p className={styles.subtitle}>This is a subtitle.</p>
  </div>
);

export default MyComponent;

CSS Modules also allow you to use dynamic class names, which can be useful for conditional styling:

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

const MyComponent = ({ isError }) => (
  <div>
    <h1 className={`${styles.title} ${isError ? styles.error : ''}`}>
      Hello, World…