If you are getting the error “Global CSS cannot be imported from files other than your Custom <App>” when trying to include a CSS file in your Next.js application, it means that you are trying to import the CSS file from a component or module other than the _app.js file.

In Next.js, global CSS styles should be included in the _app.js file, which is a special component that wraps all of your application’s pages. This ensures that the styles are applied consistently across all pages.

To fix the error, you’ll need to import the CSS file in the _app.js file like this:

import '../styles.css'

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

export default MyApp

Alternatively, you can use the styled-jsx library to include local styles in your components. This allows you to define styles that are only applied to a specific component and its children.

To use styled-jsx, you can include a style element in your component’s JSX code like this:

function MyComponent() {
  return (
    <div>
      <style jsx>{`
        p {
          color: red;
        }
      `}</style>
      <p>This text is red.</p>
    </div>
  )
}

Keep in mind that global styles defined with styled-jsx will still be applied to all pages in the application.