Built-in CSS Support

With Next.js, you can import CSS files from a JavaScript file.

How to import a global stylesheet

  1. You can start by creating a stylesheet and naming it something simple like style.css.

  2. You can then import this file in to your pages/_app.js file.

  3. Then, all the styles you put in your style.css file will apply to all your pages and components.

Importing styles from node_modules

You can import stylesheets like bootstrap or nprogress like you would import any other css file in to your pages/_app.js.

How to add Component-Level CSS

With Next.js, you can also create CSS modules. The file naming convention is [name].module.css.

These modules can locally scope CSS and automatically create unique class names. Using CSS modules, you can use the same CSS as you would use in a different way.

You can import CSS modules everywhere in to your application.

External sources

More about the _app.js file