Sass, CSS-in-JS and Component Libraries

CSS Modules and Tailwind cover most projects, but teams arrive at Next.js with existing Sass code, styled-components habits or a preferred component library. Each works in the App Router with a few adjustments. After this lesson you will be able to set up Sass, make a runtime CSS-in-JS library stream its styles correctly, pick a zero-runtime alternative when appropriate, and integrate a component library.

Sass and SCSS Modules

Next.js supports Sass out of the box once the compiler is installed:

bash

npm install --save-dev sass

Both .scss and .sass syntaxes work, and the module convention is the same as for CSS Modules:

scss

// components/Card.module.scss
@use "sass:color";
$brand: #1d4ed8;

.card {
  padding: 1rem;
  border: 1px solid color.adjust($brand, $lightness: 40%);
  &:hover { border-color: $brand; }
}

tsx

import styles from "./Card.module.scss";
export function Card({ children }: { children: React.ReactNode }) {
  return <div className={styles.card}>{children}</div>;
}

Sass Modules work in Server and Client Components alike because the output is plain CSS. Shared variables and mixins can be made available everywhere through sassOptions in next.config.ts, for example sassOptions: { includePaths: ["./src/styles"] } so that @use "variables" resolves without relative paths.

Runtime CSS-in-JS and the App Router

Libraries such as styled-components and Emotion generate styles in JavaScript at render time. That model has two consequences in the App Router:

They only work in Client Components; a Server Component cannot run the style engine.
During server-side streaming, generated styles must be collected and injected into the HTML before the content that uses them, or the page flashes unstyled.

The second point is solved by a style registry, shown in the sample at the top of this lesson. useServerInsertedHTML from next/navigation inserts the collected <style> tags into the streamed response at the right moment. Wrap the root layout's children in the registry and enable the SWC transform for readable class names:

typescript

// next.config.ts
import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  compiler: { styledComponents: true },
};

export default nextConfig;

Emotion, MUI and Chakra follow the same registry pattern. Because every styled element forces a client boundary, keep such components at the leaves of the tree.

Zero-Runtime Alternatives

If you like the co-located, typed authoring style of CSS-in-JS but want Server Component compatibility, choose a library that compiles styles away at build time:

| Option | How it works | Server Components | |---|---|---| | Tailwind CSS | Utility classes scanned at build | Yes | | CSS Modules / Sass Modules | Scoped class names | Yes | | vanilla-extract | TypeScript files compiled to static CSS | Yes | | Panda CSS | Style objects extracted at build | Yes | | styled-components / Emotion | Runtime style injection | Client only |

Component Libraries

Libraries fall into two groups. Copy-in libraries such as shadcn/ui generate source files into your project (npx shadcn@latest init, then npx shadcn@latest add button); they use Tailwind and Radix primitives, so they work with Server Components except where a component is interactive. Package libraries such as MUI or Ant Design ship runtime CSS-in-JS and require the registry approach above plus their documented Next.js integration package.

Tips

Prefer build-time styling for new projects; reserve runtime CSS-in-JS for migrations.
Keep global styles in one file imported by the root layout; everything else stays modular.
When a library's component needs "use client", wrap it once in your own file rather than marking every consumer.

Key Takeaways

Install sass and use .module.scss files exactly like CSS Modules; they work in any component.
Runtime CSS-in-JS libraries are client-only and need a registry with useServerInsertedHTML for streaming.
Enable compiler.styledComponents in next.config.ts for the SWC transform.
Build-time options (Tailwind, CSS Modules, vanilla-extract, Panda) work everywhere with no registry.
Copy-in libraries like shadcn/ui integrate naturally; package libraries need their Next.js adapter.

Next lesson: Image and Font Optimization — serve responsive images and self-hosted fonts with zero layout shift.