#Next.js

How To Add CSS In Next.js?

Easy Ways Add CSS in Next.js #SeriesPart2 💕

In this Next Series, we Learn How to add CSS Projects 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 Is Next.js?

Make sure to Read the 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'

Next.js Version 9.3 Support CSS Module for Component-Level Styles Now You Add import CSS use .module.css for local scope

import style from 'style.module.css'

Go To Github Download or Use Npm:

npm install --save @zeit/next-css

or

yarn add @zeit/next-css

Create a next.config.js in the root of your project.

Default:

default config used for importing CSS Global stylesheet in custom _app.js

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

Custom:

Custom config is used to import CSS in other Components like header and footer.

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 install and create an app, use this npm command.

npx create-next-app myapp
# or
yarn create next-app myapp

In that case, the global custom _app.js creates by default in your project; otherwise, you create Global in your project to import your Global CSS file in next.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:

About Me

My Name is Rajdeep Singh. I’m a Front-end Developer, blogger, and A student in BioTechNology in Medical Science.

Reference:

Contact me:

• https://www.facebook.com/officialrajdeepsingh/
• https://www.officialrajdeepsingh.dev/
• https://www.facebook.com/groups/JavaScriptcode/
• https://www.facebook.com/groups/pythoncodejoin/
• [email protected]