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 |
|
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 using Vercel:
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).