Q33: How do CSS Modules work in the Pages Router?
Next.js supports CSS Modules out of the box using the .module.css extension. Styles defined inside CSS modules are scoped locally to the importing component file to avoid global class name collisions.
Importing CSS Modules
import styles from './Button.module.css';
export default function Button() {
return <button className={styles.btnPrimary}>Click Me</button>;
}💡 styles.btnPrimary resolves to a unique scoped class name string like Button_btnPrimary__1a2b3.
Key Takeaways
- Use
[name].module.cssfiles. - Automatically generates unique scoped CSS class names.
Knowledge Check
Where can global un-scoped CSS stylesheets (e.g., import '../styles/global.css') be imported in the Pages Router?