Global CSS Must be in Custom Next.js App

Managing global CSS in a NextJS application is crucial for consistent styling across your entire project. In NextJS, you can achieve this by creating a custom _app.js file in your pages directory. This file allows you to extend the default App component provided by NextJS and wrap your entire application with additional components or configurations, including global CSS.

What is Global CSS in Next.js?

• The term "global CSS" describes CSS styles that are applied to a web application's many components or the document as a whole.
• Regardless of where an element is presented on the page, these styles impact its appearance and arrangement across the whole application.
• Global CSS rules are usually applied to all items on the page and defined outside of any particular component.
• This can involve applying uniform typography, layout, color, and other design styles throughout the application.

Uses of global CSS

• Resetting Default Styles: To guarantee consistent rendering across browsers, reset or normalize default styles.
• Typography: Specifying the weights, widths, and styles of fonts for text components across the program.
• Layout: Specifying global layout attributes like padding, margins, and container and other layout component positions.
• Colors and Themes: Establishing color palettes, backdrops, and themes that are used uniformly across the program.

Why This Error Occurred

Global CSS Must be in Custom Next.js App simply explains that the file defined for global styling is not inported in _app.js file, which can be due to the following reasons

• An effort was made to import Global CSS from a file external to pages/_app.js, which is not permissible.
• Global CSS should only be utilized within your custom _app.js file to avoid issues with ordering and potential side-effects.

Possible Solutions

1. Global CSS File:

Create one CSS file in style folder in your NextJS and import this file into your project main 'pages/app.js' file.

/* styles/style.css */

body {
  text-align: center;
  font-size: 20px;
  color: brown;
}

// pages/_app.js

import "./../styles/style.css";

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

export default MyApp;

// pages/index.js

export default function Home() {
    return (
        <div>
            <h1>Hello, Global Css</h1>
        </div>
    );
}

Output:

2. Employing the CSS Module:

• CSS Modules, which scope CSS files locally by default, are supported by NextJS.
• If you'd rather work that way, you can use CSS Modules to make a global CSS file that you can import into your index.js file:

/* styles/style.module.css */

.global-styles {
  text-align: center;
  font-family: "Roboto", sans-serif;
  font-size: larger;
  color: cornflowerblue;
}

//pages/_app.js

import styles from "./../styles/style.module.css";

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

export default MyApp;

// pages/index.js

export default function Home() {
    return (
        <div>
            <h1>Hello, Global Css</h1>
        </div>
    );
}

Output:

3. Straight Line Design:

• You can also apply styles directly inline in your JSX, though this is not usually advised for global styles:

// pages/index.js
import React from "react";

export default function Home() {
    return (
        <div style={{ backgroundColor: "pink", textAlign: "center" }}>
            <h1>Hello, Global css</h1>
        </div>
    );
}

Output:

4. Using a third-party CSS-in-JS solution:

• You can use a CSS-in-JS library like Styled Components or Emotion if you would rather define your styles in JavaScript as opposed to using standard CSS files.
• These libraries can be used globally and let you create styles inside your components.

5. Customize Webpack setup:

• NextJS's webpack configuration may need to be altered if you require the use of particular plugins or have complicated CSS requirements.
• To accomplish this, make a file called next.config.js in the project root and edit the webpack configuration.
• This strategy is more sophisticated, though, so proceed with caution.

6. Verify versions and dependencies:

• Make sure you're utilizing compatible versions of other dependencies and that your NextJS version is current.
• Compatibility problems might occasionally result in unforeseen mistakes.

7. Examine community resources and documentation:

• NextJS has a sizable community and copious documentation.
• Look through the official documentation and community forums (such as Stack Overflow or GitHub problems) to find answers or solutions that are relevant to your case.