How To Add CSS In Next js?

Easy Ways Add CSS in Next.js #SeriesPart2

Rajdeep Singh
Rajdeep Singh

2 min read

Table of contents

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';
copy success

Go To Github Download or Use Npm:

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

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({});
copy success


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
copy success

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} />;
copy success