Why Global CSS in NextJS? - Purpose & Use Cases

The Big Idea

Discover how one CSS file can style your whole website effortlessly!

The Scenario

Imagine styling every page of your website by adding the same CSS rules inside each component or HTML file separately.

The Problem

This approach is slow, repetitive, and easy to make mistakes. If you want to change a color or font, you must update every single place manually.

The Solution

Global CSS lets you write your styles once in a single file that applies everywhere, making your site consistent and easy to update.

Before vs After

✗ Before

/* In each component */
<style jsx>{`
  body { font-family: Arial; }
  h1 { color: blue; }
`}</style>

✓ After

/* global.css */
body { font-family: Arial; }
h1 { color: blue; }

/* imported once in _app.js */

What It Enables

It enables you to maintain a consistent look across your entire website with minimal effort.

Real Life Example

Think of a company website where the brand colors and fonts must be the same on every page; global CSS makes this easy to manage.

Key Takeaways

Writing CSS once and applying it everywhere saves time.

Global CSS keeps your website style consistent.

Updating styles is simple and error-free.