Instruction: Explain the process and benefits of using CSS modules in Next.js.
Context: This question aims to evaluate the candidate's understanding of CSS module integration and its benefits in component-scoped styling.
Official answer available
Preview the opening of the answer, then unlock the full walkthrough.
Firstly, to use CSS modules in Next.js, the process begins by creating a CSS file in the same directory as your Next.js component. This file should follow the naming convention [name].module.css, where [name] is typically the same name as your component. For example, if you have a component named Button.js, your CSS module would be named Button.module.css. Within this CSS file, you can define your styles as you would normally, but with a focus on the styles being specific to the component it's tied to.
Once the CSS module is created, you can import it into your Next.js component using the import statement, similar to how you would import JavaScript modules. For instance, import styles from './Button.module.css'; would import the styles defined in...