Next.js Global CSS cannot be imported from files other than your Custom

When you try to import a CSS file on your component like:

import "./styles/home.css";
export default function Home() {
  return <div className="main"></div>;
}

you get an error that says:

Next.js Global CSS cannot be imported from files other than your Custom <App>

There are two ways to fix this error:

Method 1

Rename your CSS file to your_file.module.css. And import and use it on your Component as follows:

import styles from "./styles/home.module.css";
export default function Home() {
  return <div className={styles.main}></div>;
}

Your home.module.css

.main {
  background: red;
  height: 100px;
  width: 100px;
}

Method 2

Import your home.css file in _App.js like Next.js says:

_App.js

import "@/components/home.css";

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

export default MyApp;

We imported the home.css file in _App.js without making it a module. Both methods work but the second method applies the style globally.

If you want more tutorials like this or have questions about this tutorial, follow me on Twitter. Also if you want to receive it in your email, subscribe to the newsletter! Thanks for your time!