A/B Testing Simple is a Vercel example template built on Next.js that runs A/B tests in Edge Middleware, serving statically generated variants at the edge to eliminate client-side layout shift.
What is A/B Testing Simple?
A/B Testing Simple is an open-source Next.js example from Vercel that demonstrates how to perform A/B testing using Edge Middleware. It accepts incoming requests through a middleware.ts file and returns one of several pre-rendered page variants, with no client-side JavaScript required to swap content. The template uses Tailwind CSS for styling and is part of the vercel/examples repository on GitHub, which currently has over 5,000 stars.
Key Features
- Edge Middleware A/B testing — A/B tests run inside middleware.ts at the edge, so requests are routed to the correct variant before the page loads.
- Static variant generation — Each experiment variant is generated statically, meaning content is served as pre-built HTML rather than injected by a script.
- No client-side layout shift — Since variants arrive fully rendered, there is no layout shift (CLS) caused by late-inserted DOM nodes.
- Smaller JavaScript bundles — The approach removes the need for client-side experiment libraries, cutting the JavaScript shipped to browsers.
- One-click deployment — A Vercel deploy button lets you clone and launch the template instantly without local setup.
- Local development support — You can bootstrap the example locally with
pnpm create next-appand run it withpnpm devfor development, then deploy to Vercel.
Who is it for?
- Next.js developers who want a minimal reference implementation for running A/B tests without adding a heavy client-side SDK.
- Performance-focused teams that need to reduce layout shift and JavaScript bundle size while still running experiments.
- Vercel users who want a ready-made example that integrates with Edge Functions and can be deployed with a single click.
How does A/B Testing Simple work?
The template places all experiment logic in a middleware.ts file that executes on Vercel's Edge Network. At request time, the middleware evaluates which variant a visitor should see and serves the corresponding statically generated page, avoiding any client-side rendering of the alternative content. The demo is live at edge-functions-ab-testing-simple.vercel.app.
Alternatives
Other Vercel example templates in the same category include ab-testing-google-optimize and ab-testing-statsig. These also use edge middleware for A/B testing but integrate with Google Optimize and Statsig, respectively, rather than the hand-rolled approach shown here.
FAQ
Is A/B Testing Simple free to use?
The template is open source and part of the public vercel/examples repository, so cloning it is free. Deploying it to Vercel uses your Vercel account; the template itself has no licensing fee.
How do I deploy A/B Testing Simple?
You can deploy it in one click using the Vercel Deploy button, which clones the repository and sets up your project, or clone it locally with pnpm create next-app and run pnpm dev for development before deploying.
What is the difference from client-side A/B testing?
Client-side testing inserts experiment variants into the DOM after the page loads, which can cause layout shift and requires extra JavaScript. This template serves the variant as static HTML from the edge, eliminating layout shift and keeping the browser bundle smaller.
