Global CSS

The simplest way to style a Next.js app is a single, ordinary CSS file imported once and applied everywhere — no scoping, no preprocessing, just plain CSS rules that apply to the whole document. This is Global CSS, and the App Router supports it with one important restriction on where you're allowed to import it from.

app/globals.css

CSS

:root {
  --color-primary: #0070f3;
  --color-text: #111;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  color: var(--color-text);
  font-family: sans-serif;
}

a {
  color: var(--color-primary);
}

app/layout.tsx

TSX

import './globals.css'

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  )
}

Warning

A global stylesheet can only be imported in the root app/layout.tsx. Importing a global CSS file — one that is not named *.module.css — from any nested layout, page, or component throws a build error. This restriction exists because global styles applied from a nested route would leak outside that route's boundary in ways that are hard to reason about, so Next.js enforces a single, predictable entry point for them.

When Global CSS makes sense

Use Global CSS for	Use CSS Modules instead for
CSS resets and base element styles (`body`, `a`, `h1`)	Styling a specific, reusable component
Design tokens defined as CSS custom properties	Anything where class name collisions are a real risk
Third-party library stylesheets that expect global scope	Component-level styles that should travel with the component file

In short: reach for Global CSS for the handful of app-wide concerns that genuinely need to apply everywhere, and reach for CSS Modules (covered next) once you're styling anything that belongs to a specific component.

Note

This site itself keeps Global CSS intentionally minimal — resets and a handful of CSS variables — and relies on MUI's Emotion-based theming for everything else. Mixing a small global stylesheet with a component-level styling approach is a common, sensible pattern.

Global CSS is plain, unscoped CSS applied to the whole document.
It can only be imported from the root app/layout.tsx — importing it anywhere else throws a build error.
Best suited to resets, base element styles, and CSS custom properties, not component-specific styling.
Pairs well with a scoped approach like CSS Modules for everything below the app-wide layer.