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 NextJS?

• The open-source, React-based NextJS web development framework has become incredibly popular because of its incredible features.
• Vercel is the developer of NextJS, which is notable for its powerful features, such as improved search engine optimization (SEO) and server-side rendering (SSR).
• Creating dynamic routes and managing navigation inside your application is made easy using NextJS’s built-in routing feature.

What is global CSS?

• 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.

Typical uses of global CSS include

• 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

• 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.

To provide the possible way to fix the error, follow these steps

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.

CSS

/* styles/style.css */

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

JavaScript

// pages/index.js

import React from "react";
import "./../styles/style.css";

export default function app() {
  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:

CSS

/* styles/style.module.css */

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

JavaScript

//pages/index.js

import React from "react";
import styles from "./../styles/style.module.css";
export default function app() {
    return (
        <div className={styles["global-styles"]}>
            <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:

JavaScript

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

export default function app() {
    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.