CSS Modules in NextJS - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is a CSS Module in Next.js?

A CSS Module is a CSS file where class and animation names are scoped locally by default. In Next.js, it helps avoid style conflicts by generating unique class names for each component.

beginner

How do you import a CSS Module in a Next.js component?

You import it like a JavaScript object using: <code>import styles from './Component.module.css'</code>. Then you use the styles as <code>className={styles.className}</code> in your JSX.

intermediate

Why use CSS Modules instead of global CSS?

CSS Modules prevent style conflicts by scoping styles locally to components. This means styles won’t accidentally affect other parts of the app, making maintenance easier and safer.

intermediate

How does Next.js generate unique class names with CSS Modules?

Next.js automatically appends a unique hash to class names from CSS Modules. For example, <code>.button</code> might become <code>button_xyz123</code>, ensuring styles are local and don’t clash.

intermediate

Can you use CSS Modules with global styles in Next.js?

Yes, you can use global CSS files for styles that apply everywhere, and CSS Modules for component-specific styles. Global CSS must be imported only in _app.js or _app.tsx.

How do you apply a CSS Module class named 'header' to a div in Next.js?

A <div className={styles.header}></div>

B <div class='header'></div>

C <div className='header'></div>

D <div style={styles.header}></div>

You must use the imported styles object and set className to styles.header to apply the CSS Module class.

What file extension is used for CSS Modules in Next.js?

A .module.css

B .css

C .scss

D .cssmodule

CSS Modules in Next.js use the '.module.css' extension to distinguish them from global CSS files.

Where should you import global CSS files in a Next.js project?

A In the page components

B Only in _app.js or _app.tsx

C In any component

D In CSS Modules

Global CSS files must be imported only in the custom App component (_app.js or _app.tsx) in Next.js.

What is the main benefit of using CSS Modules?

A Automatically minifies CSS

B Faster CSS loading

C Supports inline styles

D Scoped styles to avoid conflicts

CSS Modules scope styles locally to components, preventing style conflicts across the app.

If you have a class named 'button' in a CSS Module, what will Next.js do?

A Use 'button' as is globally

B Ignore the class

C Generate a unique class name like 'button_xyz123'

D Convert it to inline styles

Next.js generates unique class names by appending a hash to avoid conflicts.

Explain how CSS Modules help manage styles in a Next.js project.

Think about how styles stay inside components without affecting others.

Describe the difference between global CSS and CSS Modules in Next.js and when to use each.

Consider the scope and where you import the styles.