![Screenshot 2023-07-26 at 10 18 14 AM](https://private-user-images.githubusercontent.com/95453018/256298287-d27dbbfe-5eef-4d58-8244-efdc43c249cc.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjMyNDUyNTksIm5iZiI6MTcyMzI0NDk1OSwicGF0aCI6Ii85NTQ1MzAxOC8yNTYyOTgyODctZDI3ZGJiZmUtNWVlZi00ZDU4LTgyNDQtZWZkYzQzYzI0OWNjLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA4MDklMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwODA5VDIzMDkxOVomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTJhNDA4YmIzY2I4ZWY4MGY5YmZmZTZhMGNmOWVjYjM5MDI3M2Q2NDBhMDlhMTE2OWM5MWZhNjg1MWYzNzY1MzMmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.8Cvg10ytcfEbLKLr-HYbt_eBOgfe7EcVsYKUGKdZy-s)
This example shows how to do experimentation using Statsig, leveraging Edge Config and Edge Middleware. This example is an updated version of Vercel's Statsig example. It has been updated to use the NextJS 13 App Router.
The ab-testing-statsig-app-router-template
is a simple and efficient way to get started with A/B testing on the Edge with Vercel and NextJS. It is developed and maintained by Ampry and 9d8. Built by Cameron Youngblood and Bridger Tower.
Click the Reset Cookie
button to refresh the cookie and re-bucket you into a new experiment group.
You can choose from one of the following two methods to use this repository:
One-Click Deploy using Vercel:
Clone this Repository
git clone https://github.com/9d8dev/ab-testing-statsig-app-router-template.git
cd ab-testing-statsig-app-router-template
npm install
npm run dev
Login to the Statsig console and enable the pro plan to access experimentation features.
Navigate to Settings
-> Keys and Environments
. Add all three API keys (client, server, and console) to your env
file respectively.
Install the Statsig Vercel Integration for your project. It will give you the Edge Config Connection String and Edge Config Item Key. Place these in your env
file respectively.
To create an experiment, sign in to Statsig and navigate to Experiments
in the sidebar menu. Create a new experiment and name it whatever you like. Enter additional optional information. At the end of the form, select User ID
for the ID Type.
Within your NextJS project, open /lib/constants.ts
. Copy the experiment name from Statsig and paste it as the value for the EXPERIMENT
constant.
EXAMPLE:
export const EXPERIMENT = nextjs_test;
Add a parameter to your experiment called bucket
.
Name your buckets. In this case, make sure that your control
bucket is left blank. It doesn't matter what your name your variation, this page will be statically generated at build time. See image below for example.
![Screenshot 2023-07-26 at 9 12 24 AM](https://private-user-images.githubusercontent.com/95453018/256280280-86c401be-17c9-4c66-ac16-af59a9f48783.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjMyNDUyNTksIm5iZiI6MTcyMzI0NDk1OSwicGF0aCI6Ii85NTQ1MzAxOC8yNTYyODAyODAtODZjNDAxYmUtMTdjOS00YzY2LWFjMTYtYWY1OWE5ZjQ4NzgzLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA4MDklMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwODA5VDIzMDkxOVomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTQ5MTU5MGIyMzBhYjFiZTc5M2YwZGNiNDY1NGY1M2E2YTFiYTI5MWE4NTk2OTY0ODUxOGMyMWJlMzg1NTNlYjQmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.o3sSqqyzS2l3DLwrndFO2c24Hc2E5nCcu7bjrXATPJo)
When you have completed your configuration, you can start the experiment.
In this example, the app/[bucket]/page.js
file is the variation page whereas the root app/page.js
file is the control page. In other words, the root page is your original page while the bucket page contains the changes you want to test. With the configuration in this project, traffic will be split between these two pages. Make any changes to your page in the app/[bucket]/page.js
file.
While this example does not yet support metrics, Statsig has a client-side React library for easily managing metrics and custom events. This allows you to send custom client events from pages that are wrapped in the Statsig provider.
This example utilizes middleware to direct traffic to the proper variation. See middleware.ts
for more details.
This project is open for contributions. We look forward to seeing your ideas and improvements.
This project is licensed under the MIT License. See the LICENSE file in the repository root for more information.
For more information, check out the creators at Cameron Youngblood and Bridger Tower. Made by 9d8 and Ampry.