next-yak

next-yak is a CSS-in-JS solution tailored for Next.js that seamlessly combines the expressive power of styled-components syntax with efficient build-time extraction of CSS using Next.js's built-in CSS configuration.

next-yak	Next.js	react	swc_core
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 >= 15.2.1
npm i next-yak@latest

# For Next.js 14.x
npm i next-yak@2

# For Next.js >= 15.2.1
pnpm i next-yak@latest

# For Next.js 14.x
pnpm i next-yak@2

# For Next.js >= 15.2.1
yarn i next-yak@latest

# For Next.js 14.x
yarn i next-yak@2

# For Next.js >= 15.2.1
bun i next-yak@latest

# For Next.js 14.x
bun i next-yak@2

Enable next-yak

Add next-yak to your next configuration file:

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

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

export default withYak(nextConfig);

const { withYak } = require("next-yak/withYak");

const nextConfig = {
  // your next.js config
};

module.exports = withYak(nextConfig);

import { withYak } from "next-yak/withYak";

const nextConfig = {
  // your next.js config
};

export default withYak(nextConfig);

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;
`;

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

export default HomePage;

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

Getting started

next-yak

Installation

Install the package

Enable next-yak

Start using next-yak

On this page