How To Add CSS In Next js?

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

https://officialrajdeepsingh.dev/what-is-next.js/

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
or
yarn add @zeit/next-css

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

Default

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

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

Custom

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

Demo

Reference

https://nextjs.org/docs/basic-features/built-in-css-support

https://nextjs.org/blog/next-9-2

https://nextjs.org/blog/next-10