LIVE DEMO · NEXT.JS MIDDLEWARE
Four 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.
Middleware active on /hero · /demo-edge · /demo-combined
01
EDGE · LAYOUT
→Hero Layout Test
Two completely different page layouts behind the same URL. The edge assigns the variant transparently — browser sees no change.
- Control: Single-column — "Ship faster with data"
- Variant B: Two-column with feature cards — "Build what users actually want"
02
EDGE · URL REWRITE
→Edge Rewrite Explainer
Visual walkthrough of how the edge intercepts a request and rewrites the URL server-side — the browser never sees the internal path.
- Control: Light page — steps shown on white background
- Variant B: Dark page — same steps, navy background
03
SDK · UTM
→SDK Content Test
No edge rewrite — the server reads ?utm_koryla and renders a different content block. Same URL, zero cookies.
- Control: "The fastest way to A/B test." + outlined button
- Variation-1: "Stop guessing. Start winning." + filled button — add ?utm_koryla=variation-1
04
EDGE + SDK
→Combined Layers
Two independent layers: edge controls the page layout, SDK controls the content block. Four possible combinations from one URL.
- Layer 1 (Edge): single-col control vs two-col variant B
- Layer 2 (SDK): control copy vs variation-1 — add ?utm_koryla=variation-1
Clear your cookies to be re-assigned. Edge experiments use a ky_ cookie. SDK experiments use URL params.