name	slug	description	framework	useCase	css	deployUrl	demoUrl	relatedTemplates
A/B Testing with A/BBY	ab-testing-abby	A/BBY is a service for developer focused Feature Flags & A/B Testing. In this template you'll be able to use feature flags and A/B tests at the edge.	Next.js	Edge Middleware	Tailwind	https://vercel.com/new/clone?repository-url=https://github.com/vercel/examples/tree/main/edge-middleware/ab-testing-abby&env=NEXT_PUBLIC_ABBY_PROJECT_ID&project-name=abby-demo&repository-name=ab-testing-abby	https://abby-nextjs-example.vercel.app/	ab-testing-simple

A/B Testing with ConfigCat

A/BBY is a service for developer focused Feature Flags & A/B Testing. In this Demo you'll be able to use feature flags and A/B tests at the edge.

By A/B testing directly on the server-side, you'll reduce layout shift from client-loaded experiments and improving your site's performance with smaller JavaScript bundles.

Demo

https://abby-nextjs-example.vercel.app/

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:

Clone and Deploy

Execute create-next-app with pnpm to bootstrap the example:

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

You'll need to have a free A/BBY account. Once that's done, copy the .env.example file in this directory to .env.local (which will be ignored by Git):

cp .env.example .env.local

Then open .env.local and set the NEXT_PUBLIC_ABBY_PROJECT_ID environment variable to your project's id. Your can copy your project's ID by clicking the Code button on the top right of your dashboard and selecting Copy Project ID.

The demo uses needs the following to be set in your A/BBY project:

• 1 Environment called default
• 2 Feature Flags (serverFlag and clientFlag)
• 2 A/B Tests (Home and Marketing)

Next, run Next.js in development mode:

pnpm dev

The middleware.ts file is used for the /marketing and home/ routes. The user will see the page for his variant.

The index page (pages/index.tsx) also shows how to do AB testing under the same path, in SSR and client-side.

Deploy it to the cloud with Vercel (Documentation).