Why I build with Next.js 16 and SCSS Modules

Most of the sites I build for clients share the same backbone: Next.js on the App Router, React Server Components by default, and plain SCSS Modules for styling. No utility-class framework. Here's why that combination keeps winning.

Server components do the boring work

The App Router renders on the server unless you opt out. That means data fetching, metadata, and the bulk of the markup never ship JavaScript to the browser. You mark only the genuinely interactive pieces with "use client":

"use client";
 
import { useState } from "react";
 
export function ContactForm() {
  const [sent, setSent] = useState(false);
  // ...only this island hydrates on the client
}

The result is fast pages by default, with interactivity added deliberately rather than everywhere.

Design tokens beat utility classes

Instead of a framework, the whole design system lives as CSS custom properties:

:root {
  --ink-900: #0a0a0c;        // page ground (warm near-black)
  --silver-050: #f5f5f7;     // primary text
  --accent: #b9abff;         // themeable per page
  --r-card: 22px;            // card radius
}

Components reference the tokens through colocated *.module.scss files. Change a token once and the change ripples through the site, and because each module is scoped, there are no class-name collisions to worry about.

The polish of a design studio with the reliability of an engineer: that only works when the system is small enough to hold in your head.

What this gets you

• No build-time CSS framework to learn, configure, or purge.
• Theme-per-page by swapping a single --accent variable.
• Static output: every route prerenders, so hosting is cheap and fast.

If you're starting a content or marketing site today, this is the stack I'd reach for first. Get in touch if you'd like one built.