Install the package

Install next-yak dependency using your favorite package manager.

# For Next.js >= 15.0.4
npm i next-yak@4
 
# For Next.js 14.x
npm 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);

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:

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.