Topic

Style Next.js applications

Definition

Next.js supports global CSS and scoped styling approaches such as CSS Modules while preserving component and route composition.

In simpler words

Use global CSS for application-wide foundations and local styles for a component’s own rules.

Style ownership should be as deliberate as component ownership so visual changes remain predictable and accessible.

Open official example (opens in new tab)

After this you can

Choose global versus scoped CSS
Import global styles at the root boundary
Preserve focus and semantic styling

Choose the right style scope

Global CSS is appropriate for resets, design tokens, typography foundations, and application-wide element defaults. Component-specific selectors should stay scoped so a future route cannot accidentally inherit an unrelated rule.

CSS Modules give local class names without requiring global naming conventions. Whatever system a repository adopts, semantic HTML and visible focus states remain part of the component contract.

Global foundation and local component style

// app/layout.tsx
import './globals.css';

// TicketCard.tsx
import styles from './TicketCard.module.css';
return <article className={styles.card}>...</article>;

The root imports global foundations; the card owns its isolated rules.

Mistake: removing focus outlines globally

/* Wrong — keyboard users lose their location */
*:focus { outline: none; }

/* Right — provide a visible replacement */
:focus-visible { outline: 2px solid var(--focus-ring); }

A visual design rule must not erase keyboard navigation feedback.

Keep styles close to their meaning

Definition

A component style should describe that component’s visual responsibility, not a route-wide accident.

In simpler words

Prefer meaningful class names and tokens over brittle selectors that depend on nesting depth.

Use the Course’s established IBM Plex and neutral visual language instead of introducing a competing visual system for one lesson.

Test hover-only affordances with keyboard focus and touch use in mind.

Live playground

CSS playground

Move one selector from global CSS to a module and observe its scope.

Global CSS from root layout; prefer scoped rules for components.

next-css

Keep in mind

Import global foundations from the root layout.
Scope component rules to avoid selector collisions.
Never remove focus visibility without an accessible replacement.

Test

Check your understanding

At least 10 questions — mix of concept, syntax, practical, and logic. Score ≥80% (enforced by the API) to save progress.

Checking your session…

15 questions · concept 5 · syntax 3 · practical 4 · logic 3

1. Global CSS import place?

Concept

In next.config under a css optionIn each page.tsx that needs the global stylesIn an app/global.css that loads without being importedTypically root layout

2. CSS Modules benefit?

Syntax

Global class names shared across every componentAutomatic dark mode variants for each classLocally scoped class names by defaultRuntime style injection like CSS-in-JS

3. Tailwind in Next?

Practical

Supported via PostCSS setup — common choiceSupported only in the Pages Router, not the App RouterBuilt in automatically with no configuration neededSupported only inside Client Components

4. Why avoid huge global CSS soups?

Logic

Conflicts and hard refactors — prefer modules/utility disciplineGlobal CSS can’t be imported into the App Router at allNext refuses to bundle CSS files above a size limitGlobal styles only apply to Server Components, not client ones

5. Dark mode approaches?

Concept

A darkMode boolean exported from next.configclass/media strategies with CSS variables or Tailwind dark variantsServer-side theme switching via a Route Handler onlyStoring the theme in a NEXT_PUBLIC_ variable at build time

6. CSS-in-JS caution with RSC?

Practical

All CSS-in-JS libraries work in Server Components without setupSome runtimes need client boundaries — know library supportCSS-in-JS is always fully removed from the bundle at build timeYou must convert every component to "use server" first

7. Asset imports?

Syntax

Import images/fonts via Next tooling when appropriateReference all assets by absolute URL from a CDN onlyAssets in public/ must be imported before the browser sees themImport assets into next.config to register them

8. Responsive layouts?

Logic

Media queries / responsive utilities — not only JS resize listenersA useMediaQuery hook is required for any responsive layoutSet the app’s breakpoints in next.configResponsive design needs Server Components to detect the device

9. Composition with modules?

Concept

Concatenate class strings directly; falsy values render as "false"Compose classNames carefully (clsx/etc.)Pass an array of classes; React joins them automaticallySpread the styles object into className to apply all classes

10. Which claim is true?

Practical

Next supports CSS Modules only; global CSS is disallowedNext supports global CSS, modules, and popular utility frameworksNext requires a CSS-in-JS library for any stylingNext compiles all CSS into inline styles at build time

11. Where are global styles typically imported?

Conceptintermediate

// app/layout.tsx
import './globals.css';

In the root layoutIn next.config so it loads on every routeIn each route’s page.tsx that needs themIn a middleware file that injects the stylesheet

12. What does the .module.css convention give you?

Syntaxintermediate

import styles from './Card.module.css';
<div className={styles.card} />

Global class names available to every componentStyles that only apply inside Server ComponentsRuntime-injected styles that update with stateLocally scoped class names to avoid collisions

13. What must you consider with runtime CSS-in-JS here?

Practicaladvanced

import styled from 'styled-components';
// used in a Server Component

styled-components must be imported from next/font insteadThe styles are silently stripped and do nothing on the serverYou must add "use server" so the styles compileMany CSS-in-JS libraries need a Client Component boundary/config with RSC

14. Why use clsx here?

Logicintermediate

<div className={clsx('btn', isActive && 'btn-active')} />

To compose class names conditionally and safely handle falsy valuesTo scope the class names locally like CSS ModulesTo merge conflicting Tailwind classes so the last one winsTo load the classes lazily only when isActive is true

15. What is a simpler approach for responsive layout here?

Conceptadvanced

useEffect(() => window.addEventListener('resize', onResize));

A useEffect that reads window.innerWidth once on mountCSS media queries / responsive utilities instead of JS resize listenersA Server Component that detects the viewport at request timeThe next/image sizes prop applied to the layout container

Checking your session…