Global Styles and CSS Modules

In Next.js, managing styles effectively is crucial for building user interfaces that are both visually appealing and maintainable. This chapter explores how Next.js supports various styling strategies, starting with global styles and then diving into the more granular approach of CSS Modules.

Global styles are styles that apply to your entire application. Think of things like resets, base typography, or site-wide layout rules. In Next.js, the conventional way to implement global styles is by importing a CSS file into your pages/_app.js (or _app.tsx) file. This file is the root component that wraps all your pages, ensuring that any styles imported here are available throughout your application.

Let's imagine you have a styles/globals.css file. The above code snippet demonstrates how to import it. This approach is straightforward and effective for setting up your application's foundational styles.

While global styles are powerful for broad applications, they can lead to style conflicts, especially in larger projects. This is where CSS Modules come into play, offering a scoped styling solution.

CSS Modules are CSS files where all class names and animation names are scoped locally by default. This means that a class name defined in one CSS Module file will not clash with another class name defined in a different CSS Module file, even if they have the same name. In Next.js, you can leverage CSS Modules by naming your CSS files with the .module.css extension (e.g., styles/Button.module.css).