Add a global CSS stylesheet to a Next.js application?

coderguy asked this question 5 months ago
coderguy on Dec 3, 2021

I have CSS file that I want to globally apply across every page of my Next.js application.

How do I do that?

1 suggested answers
itsbambi on Dec 8, 2021 · Edited

Create a /pages/_app.js file:

cd pages && touch _app.js

And import your CSS file into it:

import "../styles.css"

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

The CSS styles in the /styles.css file will apply to all pages in your Next.js application. Add as many other CSS files to /pages/_app.js as you like.

Note: you'll need to restart your Next.js application for the _app.js file changes to go into effect.

Note: These CSS files will be hot-reloaded in development mode. In production, they will be automatically concatenated into one minified CSS file like all other CSS files are in the Next.js framework.

0 replies