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

Go To Github Download or Use Npm:

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

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

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

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
copy

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