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 (global.css
), and a CSS module (Home.module.css
).
If your project doesn't have those files, you can download the starter code here:
npx create-next-app nextjs-blog --use-npm --example "https://github.com/vercel/next-learn/tree/main/basics/assets-metadata-css-starter"
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:
.css
and .scss
files.In this lesson, we’ll talk about how to use CSS Modules and Sass in Next.js. Let’s dive in!