How to add external css file in a nextjs project

How to add external css file in nextjs project

Adding an external css file is easy in nextjs. Suppose, your stylesheet is styles.css and you want to include it in your nextjs project. Follow the following steps for that :

1. Create one _app.js file inside the page folder.
2. Put the stylesheet inside your project and import it in this file :

import '../styles.css'

// This default export is required in a new `pages/_app.js` file.
export default function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

That’s it. It will be used to all of your pages and components. It works with hot reloading in development and one concatenated minified css file is generated in production.