Five ways to A/B test
with Next.js
Each experiment is live — powered by @koryla/next. The server assigns variants before any HTML is sent. Zero flicker, zero JS overhead.
Hero Layout Test
Two completely different page layouts behind the same URL. Middleware rewrites /hero → /hero-b transparently. No JavaScript on the page.
- Control: Single-column — "Ship faster with data"
- Variant B: Two-column with feature cards — "Build what users actually want"
Pricing Page Test
Same 3-tier pricing, different page length. Variant B adds a FAQ section to test whether more information increases conversions.
- Control: 3-tier grid, no FAQ
- Variant B: 3-tier grid + FAQ section below
Edge Rewrite Explainer
Visual walkthrough of how the middleware intercepts a request and rewrites the URL server-side — browser sees no change.
- Control: Light page — steps shown on white background
- Variant B: Dark page — same steps, navy background
SDK Button Style Test
No middleware — just searchParams. The server reads the UTM parameter and renders a different button style. Same URL, no cookies.
- Control: Outlined button (border only)
- Variant B: Filled terracotta button — add ?utm_style=variation-1
Combined Layers
Two independent layers: edge controls the page layout, SDK controls the button style. Four possible combinations.
- Layer 1 (Edge): single-col control vs two-col variant B
- Layer 2 (SDK): outlined vs filled button via ?utm_style
Clear your cookies to be re-assigned. Edge experiments use a ky_ cookie. SDK experiments use URL params.