CSS Modules

Next.js has built-in support for CSS Modules using the .module.css extension.

CSS Modules locally scope CSS by automatically creating a unique class name. This allows you to use the same class name in different files without worrying about collisions.

Usage

CSS Modules can be imported into any file inside the app directory:

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

export default function DashboardLayout({ children }: {
  children: React.ReactNode
}) {
  return <section className={styles.dashboard}>{children}</section>;
}

.dashboard {
  padding: 24px;
}

Additional Features

Next.js includes additional features to improve the authoring experience of adding styles:

• When running locally with next dev, local stylesheets (either global or CSS modules) will take advantage of Fast Refresh to instantly reflect changes as edits are saved.
• When building for production with next build, CSS files will be bundled into fewer minified .css files to reduce the number of network requests needed to retrieve styles.
• If you disable JavaScript, styles will still be loaded in the production build (next start). However, JavaScript is still required for next dev to enable Fast Refresh.