Next-Yak

Performance

Validated across many thousands of real-world users:

• >20% faster navigational LCP
• >15% reduced server latency
• >10% faster INP

Get started and profit from these improvements without any significant increase in build times.

Features

• NextJs Compatibility
  Works smoothly with both React Server and Client Components
• Build-time CSS
  Reduces load time by handling CSS during the build phase, using Next.js built-in CSS Modules features
• Lightweight Runtime
  Operates with minimal impact, simply changing CSS classes without modifying the CSSOM
• Standard CSS Syntax
  Write styles in familiar, easy-to-use CSS
• Integrates with Atomic CSS
  Easily combines with atomic CSS frameworks like Tailwind CSS for more design options
• No significant build-time overhead
  Doesn't increase the build time significantly, by only transforming statically as much as possible without the need to evaluate arbitrary JavaScript.

import styled from "styled-components";

const Title = styled.h1`
  font-size: 1.5em;
  color: palevioletred;
  &:hover {
    color: red;
  }
`;

const App = () => (
  <Title>
    Hello World
  </Title>
);

// JS output (auto-generated)

const Title = styled.h1.withConfig({
  componentId: "sc-1289dod-0"
})`
  font-size: 1.5em;
  color: palevioletred;
  &:hover {
    color: red;
  }
`;

const App = () => (
  <Title>
    Hello World
  </Title>
);

/* no static css */