Repository files navigation

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.

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

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

Deploy the example usingVercel:

Executecreate-next-app withpnpm 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 freeA/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 theNEXT_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 selectingCopy Project ID.

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

• 1 Environment calleddefault
• 2 Feature Flags (serverFlag andclientFlag)
• 2 A/B Tests (Home andMarketing)

Next, run Next.js in development mode:

pnpm dev

Themiddleware.ts file is used for the/marketing andhome/ 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 withVercel (Documentation).