In Next.js, global CSS refers to styles that apply to your entire application rather than specific components or pages. It is an important feature for maintaining a consistent look and feel across your web application. Next.js provides a straightforward way to include global CSS files, and understanding how to use them effectively is crucial for building well-styled applications.

How to Use Global CSS in Next.js

1. Create a Global CSS File: You typically create a CSS file that contains all the styles you want to apply globally. This file is often named globals.css or something similar.

2. Import the Global CSS File: To use your global CSS file in a Next.js application, you need to import it in your custom _app.js (or _app.tsx if using TypeScript) file. This file is located in the pages directory and allows you to override the default App component that Next.js uses.

Example Steps

Step 1: Create a Global CSS File

Create a file named globals.css in a suitable directory, such as the styles directory:

/styles
  ├── globals.css

Step 2: Add CSS Rules

In your globals.css file, you can define your global styles:

/* styles/globals.css */

body {
  margin: 0;
  font-family: Arial, sans-serif;
  background-color: #f4f4f4;
  color: #333;
}

h1 {
  font-size: 2.5em;
  color: #0070f3;
}

a {
  color: #0070f3;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

Step 3: Import the Global CSS File

Now, import the globals.css file in your _app.js:

// pages/_app.js

import '../styles/globals.css'; // Import global styles

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

export default MyApp;

Explanation of the Code

1. File Structure:

   • The globals.css file contains the styles you want to apply to all pages and components within your application.

2. Importing Global Styles:

   • The import statement in _app.js includes your global CSS styles so that they are available to all components rendered in your application.

3. Custom App Component:

   • The MyApp component is a custom App component provided by Next.js. By rendering the Component with its pageProps, you ensure that the global styles apply across all pages in your application.

Important Considerations

• One Global CSS File: Next.js allows you to import a single global CSS file per application. If you need additional styles, you can combine them in your global CSS file or consider using component-specific stylesheets or CSS-in-JS libraries for modular styling.

• Ordering: The order of CSS imports matters. Styles defined later will override earlier styles if they target the same elements.

• Performance: Using global CSS can lead to larger CSS files, which may affect performance. It's best practice to keep global styles minimal and only include styles that are truly global.

• CSS Modules: For component-specific styles, consider using CSS Modules, which allow you to scope styles to a specific component, preventing conflicts and making your styles easier to manage.

Summary

Global CSS in Next.js provides a simple and effective way to apply consistent styles across your application. By creating a global CSS file and importing it into your custom App component, you can ensure that your styles are applied universally. However, it's essential to balance the use of global styles with component-specific styles to maintain modularity and performance in your application.