CSS Modules in NextJS - Step-by-Step Execution

Concept Flow - CSS Modules

Write CSS in .module.css file

↓

Next.js compiles CSS Module

↓

Generates unique class names

↓

Import CSS Module in React component

↓

Apply className={styles.className}

↓

Styles scoped locally, no global conflicts

CSS Modules let you write CSS that is local to a component by generating unique class names, avoiding style conflicts.

Execution Sample

NextJS

/* styles.module.css */
.title {
  color: blue;
}

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

export default function Title() {
  return <h1 className={styles.title}>Hello</h1>;
}

This code imports a CSS Module and applies a locally scoped class to an h1 element.

Execution Table

Step	Action	Input/Code	Output/Result
1	Read CSS file	styles.module.css with .title { color: blue; }	CSS parsed, ready for processing
2	Compile CSS Module	Next.js compiles CSS Module	Generates unique class name, e.g. title_xyz123
3	Import CSS Module	import styles from './styles.module.css'	styles = { title: 'title_xyz123' }
4	Render component	<h1 className={styles.title}>Hello</h1>	<h1 class="title_xyz123">Hello</h1> rendered
5	Apply styles	class="title_xyz123"	Text color is blue, scoped locally
6	Exit	Component rendered with scoped styles	No global style conflicts

💡 Component rendered with locally scoped CSS class, preventing style conflicts

Variable Tracker

Variable	Start	After Import	After Render	Final
styles	undefined	{ title: 'title_xyz123' }	{ title: 'title_xyz123' }	{ title: 'title_xyz123' }
className	undefined	undefined	'title_xyz123'	'title_xyz123'

Key Moments - 3 Insights

Why does the class name in the HTML look different from the CSS file?

Next.js compiles the CSS Module and generates a unique class name (like title_xyz123) to keep styles local, as shown in execution_table step 2 and 4.

Can styles from CSS Modules affect other components?

No, because CSS Modules generate unique class names scoped to the component, preventing global conflicts (see execution_table step 5).

What happens if I use a normal CSS file instead of a .module.css file?

Normal CSS files apply styles globally, so class names are not changed and can cause conflicts, unlike CSS Modules which scope styles locally.

Visual Quiz - 3 Questions

Look at the execution table, what is the value of styles after import?

A { title: 'title_xyz123' }

B 'title'

C undefined

D null

💡 Hint

Check execution_table row 3 under Output/Result column

At which step does Next.js generate the unique class name?

A Step 1

B Step 2

C Step 4

D Step 5

💡 Hint

Look at execution_table step describing compilation and unique class name generation

If you change the CSS file to normal .css (not .module.css), what changes in the execution?

A Component fails to render

B Unique class names are still generated

C Class names remain unchanged and styles apply globally

D Styles become scoped automatically

💡 Hint

Refer to key_moments about difference between CSS Modules and normal CSS

Concept Snapshot

CSS Modules in Next.js:
- Write CSS in .module.css files
- Next.js compiles and generates unique class names
- Import styles object in component
- Use className={styles.className} to apply scoped styles
- Prevents global CSS conflicts
- Styles apply only to the component

Full Transcript

CSS Modules let you write CSS that is local to a component by generating unique class names. In Next.js, you write CSS in a .module.css file. Next.js compiles this file and creates unique class names to avoid conflicts. You import the styles object in your React component and apply classes using className={styles.className}. This ensures styles only affect that component and do not leak globally. The execution steps show reading the CSS file, compiling it, importing styles, rendering the component with the unique class name, and applying the scoped styles. This approach helps keep your styles organized and conflict-free.