next-yak

next-yak is a build-time CSS-in-JS library powered by a Rust SWC plugin. Write styled-components syntax, get zero-runtime CSS extraction and full React Server Components compatibility.

Works with Next.js (Webpack & Turbopack), Vite 7+ (react-router, tanstack start, and more), and Storybook.

next-yak	Next.js	Vite	react	swc_core
9.x	>= 16.1.0	>= 7.0.0 (9.1+)	19.x	56.0.0
8.x	>= 16.0.0	-	19.x	45.0.1
7.x	>= 15.4.4	-	19.x	38.0.1
6.x	>= 15.4.1	-	19.x	27.0.6
5.x	>= 15.2.1	-	19.x	16.0.0
4.x	>= 15.0.4	-	19.x	5.0.1
3.x	15.x	-	18.x / 19.x	3.0.2
2.x	14.x	-	18.x / 19.x	0.279.0

Installation

Install the package

Install next-yak dependency using your favorite package manager.

# For next.js >= 16.1.0 or vite
npm i next-yak@latest

# For other next.js versions use a specific version

npm i next-yak@2

# For Next.js >= 16.1.0 or vite
pnpm i next-yak@latest

# For other next.js versions use a specific version
pnpm i next-yak@2

# For next.js >= 16.1.0 or vite
yarn i next-yak@latest

# For other next.js versions use a specific version

yarn i next-yak@2

# For next.js >= 16.1.0 or vite
bun i next-yak@latest

# For other next.js versions use a specific version
bun i next-yak@2

Enable next-yak

Add next-yak to your configuration file:

import type { NextConfig } from 'next'
import { withYak } from "next-yak/withYak";

const nextConfig: NextConfig = {
// your next.js config
}

export default withYak(nextConfig);

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react-swc";
import { viteYak } from "next-yak/vite";

export default defineConfig({
  //...
  plugins: [viteYak(), react()], // ideally this is before the react plugin
});

Start using next-yak

With the installation and configuration done, you can now use next-yak directly in your components. If you used styled-components before, you'll feel right at home.

Here's a simple example:

app/page.tsx

import { styled } from "next-yak";

const StyledDiv = styled.div`
  color: #333;
  padding: 16px;
  background-color: #f0f0f0;
`;

export default function HomePage() {
  return <StyledDiv>Hello, next-yak!</StyledDiv>;
}

You're now ready to use next-yak in your project and if you need to migrate from styled-components, you can follow the migration guide.

Using with Vite

Since v9.1.0, next-yak supports Vite 7+ (including Vite 8 with OXC/Rolldown). Check out the Vite guide for more setup instructions.

Using with Storybook

The addon storybook-addon-yak enables next-yak in Storybook 10+ with both Vite and Webpack builders. See the Storybook guide for details.

Getting started