css-global.md

Global CSS Must Be in Your Custom <App>

Why This Error Occurred

An attempt to import Global CSS from a file other than pages/_app.js was made.

Global CSS cannot be used in files other than your Custom <App> due to its side-effects and ordering problems.

Possible Ways to Fix It

To avoid conflicts, relocate all first-party Global CSS imports to your pages/_app.js file.

Or, update your component to use local CSS (Component-Level CSS) via CSS Modules. This is the preferred approach.

Example

Consider the stylesheet named styles.css

//styles.css
body {
  font-family: 'SF Pro Text', 'SF Pro Icons', 'Helvetica Neue', 'Helvetica',
    'Arial', sans-serif;
  padding: 20px 20px 60px;
  max-width: 680px;
  margin: 0 auto;
}

Create a pages/_app.js file if not already present. Then import the styles.css file.

// pages/_app.js
import '../styles.css'

export default function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}