CSS in Next.js

Three sanctioned ways to style

CSS has one famous failure mode at team scale: every class name is global, so a .card written for the checkout page silently restyles a .card on the blog, and nobody dares delete old CSS because anything might depend on it. The approaches below exist to contain that blast radius, and Next.js supports the ones you met in the React course, each with a lane:

1. Global CSS. One file, imported once in the root layout. For resets, fonts, and design tokens.

// app/layout.js
import "./globals.css";

1. CSS Modules. Files named *.module.css, scoped per component. The practical default for component styles.
2. Tailwind CSS. Utility classes in JSX. The create-next-app wizard offers to set it up because so many teams use it.

What to avoid: importing plain global CSS from random components. Next.js only allows global stylesheets in the root layout, precisely so styles stay predictable.

CSS Modules in 20 seconds

/* app/card.module.css */
.card {
  border: 1px solid #ddd;
  padding: 1rem;
}

// app/card.js
import styles from "./card.module.css";

export default function Card({ children }) {
  return <div className={styles.card}>{children}</div>;
}

Decode it:

• Importing the module gives you an object. styles.card is a generated unique class name like card_a1b2c.
• Because the name is unique, a .card class in another module can never collide with this one. Scoping by construction, no naming discipline required.
• Works identically in server and client components, since it is just class names in HTML.