Rajdeep Singh.

How To Add CSS In Next js?

Easy Ways Add CSS in Next.js #SeriesPart2

By next.js 1 min read

In this Next Series, we Learn How to add CSS's own Project with Easy Steps. Good News is that Next.js provides custom CSS functionality. You Use The next.js plugin inside your project and use it.

What's Next.js?

Make sure Read Basic Introduction About Next.js #SeriesStart


New Update

Next.js Version 9.3 Support CSS Global Stylesheets. Now you add CSS directly Import .css files as global stylesheets.

import './style.css';

Go To Github Download or Use Npm:

npm install --save @zeit/next-css
yarn add @zeit/next-css

Create an next.config.js At the root of your project


default config use for import CSS Global stylesheet in custom _app.js

const withCSS = require('@zeit/next-css');
module.exports = withCSS({});


Custom config used for import CSS in other Components like header, footer like so.

const withCSS = require('@zeit/next-css');
module.exports = withCSS({
	cssModules: true, // After true than use import statement in next.js

How To add Global CSS

When you create your app, help with npm. in the next step, you create a global app. If you npm official command the by default app create in your project and import your Global CSS file in next.js custom _app.js

import '../styles.css';
// or
import '../styles.scss';
// This default export is required in a new `pages/_app.js` file.
export default function MyApp({ Component, pageProps }) {
	return <Component {...pageProps} />;