How do I use CSS Modules in Next.js?

How do I use CSS Modules in Next.js?

To use CSS Modules in Next.js, create a CSS file with the extension .module.css and import it in your component.

Can you show me an example of a component using CSS Modules?

Sure! Here's a simple example:

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

const MyComponent = () => {
  return <div className={styles.container}>Hello, World!</div>;
};

What are the benefits of using CSS Modules?

CSS Modules help in scoping styles locally, preventing class name collisions and making styles easier to manage.

Are there any limitations I should be aware of?

One limitation is that CSS Modules only work with local styles. Global styles need to be handled separately.