For Next.js

Salty CSS, served fresh from the App Router

Zero-runtime styles that work with React Server Components — no client bundle tax, no hydration mismatch dance.

Works with React Server Components

Zero-runtime CSS means no client bundle tax and no hydration mismatch dance. RSC, client components, App Router, Pages Router — all the same.

Webpack or Turbopack — your call

withSaltyCss auto-detects which bundler your dev server is using. Same plugin, same output, on Next.js 15 and 16.

Provider-less theming

Native CSS variables plus data-theme on <html>. Flip themes in zero re-renders — yes, even inside Server Components.

Wired into next.config.ts

Three steps from install to your first build-time stylesheet — the same flow on Webpack or Turbopack.

1
Install both packages
Next.js needs @salty-css/next alongside the React runtime helpers — one command takes care of both.
```
npx salty-css init
```

Save a *.css.ts sibling

Co-locate styles next to the component. The same file works in Server and Client components — Salty doesn’t care which.

// app/components/button.css.ts
import { styled } from "@salty-css/react/styled";

export const Button = styled("button", {
  base: {
    padding: "0.75rem 1.25rem",
    borderRadius: "6px",
    background: "{theme.color}",
    color: "white",
  },
});

Wrap your config with withSaltyCss

One import, one wrap — withSaltyCss auto-detects Webpack or Turbopack and registers the compiler.

// next.config.ts
import { withSaltyCss } from "@salty-css/next";
import type { NextConfig } from "next";

const nextConfig: NextConfig = {
  // your existing Next config…
};

export default withSaltyCss(nextConfig);