---
title: "A/B Testing Simple"
description: "By A/B testing at the edge, you'll reduce CLS from client-loaded experiments and improve your site's performance with smaller JS bundles."
url: "https://vercel.com/templates/next.js/ab-testing-simple"
links:
  repository: "https://github.com/vercel/examples/tree/main/edge-middleware/ab-testing-simple"
  demo: "https://edge-functions-ab-testing-simple.vercel.app"
  deploy: "https://vercel.com/new/clone?demo-title=A%2FB+Testing+Simple&demo-description=By+A%2FB+testing+at+the+edge%2C+you%27ll+reduce+CLS+from+client-loaded+experiments+and+improve+your+site%27s+performance+with+smaller+JS+bundles.&demo-url=https%3A%2F%2Fedge-functions-ab-testing-simple.vercel.app&project-name=ab-testing-simple&repository-name=ab-testing-simple&repository-url=https%3A%2F%2Fgithub.com%2Fvercel%2Fexamples%2Ftree%2Fmain%2Fedge-middleware%2Fab-testing-simple&demo-image=%2F%2Fimages.ctfassets.net%2Fe5382hct74si%2F6TvwzoNV82GTG9DmRyjeWs%2F4e7fa415e5e8c5d650dba50b9d784a96%2Fedge-functions-ab-testing-simple.vercel.app_.png"
---

# A/B Testing Simple

By A/B testing at the edge, you'll reduce CLS from client-loaded experiments and improve your site's performance with smaller JS bundles.

---
name: A/B Testing Simple
slug: ab-testing-simple
description: By A/B testing at the edge, you'll reduce CLS from client-loaded experiments and improve your site's performance with smaller JS bundles.
framework: Next.js
useCase:
  - Edge Middleware
  - Documentation
css: Tailwind
deployUrl: https://vercel.com/new/clone?repository-url=https://github.com/vercel/examples/tree/main/edge-middleware/ab-testing-simple&project-name=ab-testing-simple&repository-name=ab-testing-simple
demoUrl: https://edge-functions-ab-testing-simple.vercel.app
relatedTemplates:
  - ab-testing-google-optimize
  - ab-testing-statsig
---

# A/B Testing Simple

By A/B testing at the edge, you'll reduce layout shift from client-loaded experiments and improve your site's performance with smaller JavaScript bundles.

## Demo

https://edge-functions-ab-testing-simple.vercel.app

Since the different variants are generated statically at the edge, it mitigates any potential layout shift that could happen when a variant is inserted into the DOM client side, hence improving your site's performance.

Take a look at [`middleware.ts`](https://github.com/vercel/examples/tree/main/edge-middleware/ab-testing-simple/middleware.ts) to see how it works.

## How to Use

You can choose from one of the following two methods to use this repository:

### One-Click Deploy

Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=vercel-examples):

[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/vercel/examples/tree/main/edge-middleware/ab-testing-simple&project-name=ab-testing-simple&repository-name=ab-testing-simple)

### Clone and Deploy

Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [pnpm](https://pnpm.io/installation) to bootstrap the example:

```bash
pnpm create next-app --example https://github.com/vercel/examples/tree/main/edge-middleware/ab-testing-simple ab-testing-simple
```

Next, run Next.js in development mode:

```bash
pnpm dev
```

Deploy it to the cloud with [Vercel](https://vercel.com/new?utm_source=github&utm_medium=readme&utm_campaign=edge-middleware-eap) ([Documentation](https://nextjs.org/docs/deployment)).

## Related Templates

### [Experimentation with Statsig](https://vercel.com/templates/next.js/ab-testing-statsig)

Reduce CLS and improve performance from client-loaded experiments at the edge with Statsig

---

## Additional documentation

The [Vercel Knowledge Base](https://vercel.com/kb) contains guides and answers to common questions about Vercel, including deployment, framework configuration, domains, caching, and troubleshooting.