Introduction to CSS Modules in Next.js

CSS Modules are a powerful way to style your Next.js applications while keeping styles scoped to specific components. They provide local scoping by default, which means class names are unique to each component. In this tutorial, we'll explore how to work with CSS Modules in Next.js.

Creating a CSS Module

1. Start by creating a CSS Module for your component. The file should end with the .module.css extension. For example, create a file named styles.module.css:

    /* styles.module.css */
    .myComponent {
        background-color: #f4f4f4;
        padding: 10px;
    }

Using CSS Modules in a Component

2. In your component file, you can import and use the CSS Module. For example:

    // MyComponent.js
    import React from 'react';
    import styles from './styles.module.css';
    function MyComponent() {
        return (
            <div className={styles.myComponent}>
                <h2>Styled Component</h2>
                <p>This component uses a CSS Module.</p>
            </div>
        );
    }
    export default MyComponent;

The class names are unique to this component and don't interfere with other components.