A/B Testing with ConfigCat

ConfigCat is a service for feature flag and configuration management. In this demo you'll be able to use feature flags 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://edge-functions-feature-flag-configcat.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

pnpm create next-app --example https://github.com/vercel/examples/tree/main/edge-middleware/feature-flag-configcat feature-flag-configcat

You'll need to have an account with ConfigCat. Once that's done, copy the

.env.example

.env.local

cp .env.example .env.local

Then open

.env.local

The demo uses the following 4 feature flags, make sure to add them to your ConfigCat environment:

Next, run Next.js in development mode:

pnpm dev

The

/about

/marketing

_middleware.ts

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

We fetch and save the feature flags in JSON at build time to avoid doing any kind of data fetching at the edge, check scripts/configcat.js to see how it works.

Deploy it to the cloud with Vercel (Documentation).