CSS Modules in Next.js

Styles can be imported using CSS modules by creating a stylesheet with the .module.css extension.

As an example, assume there's a stylesheet in home.module.css in the app directory of a Next.js project. The stylesheet looks as follows.

.shape {
    height: 0;
    width: 0;
    border-bottom: 30px solid black;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
  }

This class can then be directly used as a class name in your HTML elements.

import styles from '@/app/home.module.css'

function Shape() {
    return <div className={ styles.shape } />
}