Assets, Metadata, and CSS

CSS Styling

Let’s now talk about CSS styling.

As you can see, our index page (http://localhost:3000) already has some styles. If you look at your file structure, you'll see a folder called styles with two CSS files: a global stylesheet (globals.css), and a CSS module (Home.module.css).

CSS modules allow you to locally scope CSS at the component-level by automatically creating unique class names. This allows you to use the same CSS class name in different files without worrying about class name collisions.

In addition to CSS modules, you can style your Next.js application in a variety of ways, including:

In this lesson, we’ll talk about how to use CSS Modules and Sass in Next.js. Let’s dive in!