Skip to content

This is a simple example highlighting the integration of Next.js and A/BBY. It uses feature flags and A/B Testing

Notifications You must be signed in to change notification settings

tryabby/nextjs-example

Repository files navigation

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
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:

Deploy with 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).

About

This is a simple example highlighting the integration of Next.js and A/BBY. It uses feature flags and A/B Testing

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published