Built-in CSS Support
With Next.js, you can import CSS files from a JavaScript file.
How to import a global stylesheet
You can start by creating a stylesheet and naming it something simple like
style.css
.You can then import this file in to your
pages/_app.js
file.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.