Experimentation with Statsig is a Vercel example template for Next.js that runs A/B tests at the edge using Statsig's Global Config and Edge Middleware, delivering variants with minimal client-side JavaScript.
What is Experimentation with Statsig?
This template is a Next.js application that demonstrates how to implement experimentation with Statsig, a feature management and experimentation platform. It takes Statsig API keys and Global Config settings as environment variables, and outputs a working demo where users are randomly assigned to experiment variants. The example runs on Vercel's Edge Network via Edge Middleware, and is maintained by Vercel as part of the vercel/examples repository.
Key Features
- Edge Middleware evaluation — Experiments are evaluated in Vercel Edge Middleware, so users get their variant without waiting for client-side JavaScript to load.
- Statsig Global Config — The template uses Statsig Global Config to centralize experiment parameters, synced through the Statsig Vercel Integration.
- Reduced CLS — By moving experiment logic to the edge, the template avoids client-loaded experiments that cause Cumulative Layout Shift, improving Core Web Vitals.
- One-click deploy — Deploy to Vercel with a single click, including the Statsig integration and environment variables preconfigured.
- Five environment variables — Requires STATSIG_SERVER_API_KEY, NEXT_PUBLIC_STATSIG_CLIENT_KEY, STATSIG_CONSOLE_API_KEY, GLOBAL_CONFIG, and GLOBAL_CONFIG_ITEM_KEY.
- Tailwind CSS — The example is styled with Tailwind CSS, providing a utility-first CSS foundation.
- Next.js framework — Built on Next.js, supporting both Edge Runtime and server-side rendering.
Who is it for?
- Frontend developers who want to implement A/B testing without degrading page performance or causing layout shift.
- Product teams using Statsig who need a reference implementation for edge-based feature gates and experiments.
- Vercel customers who want to learn how to combine Edge Middleware with a third-party experimentation platform.
What can you do with it?
- Performance-conscious developers: Evaluate experiments at the edge to keep Core Web Vitals high while still personalizing content.
- Statsig users: Manage experiment parameters through Global Config without redeploying your application.
- Teams migrating from client-side testing: Replace client-loaded experiment scripts with an edge-evaluated approach to reduce flash of incorrect content.
How does it work?
To use the template, clone it with create-next-app --example https://github.com/vercel/examples/tree/main/edge-middleware/ab-testing-statsig. Then copy .env.example to .env.local and fill in five Statsig environment variables. Install the Statsig Vercel Integration to obtain the Global Config connection details. Finally, run npm install and npm run dev to start the development server.
Alternatives
Vercel offers two related examples: ab-testing-google-optimize which uses Google Optimize for experimentation, and ab-testing-simple which implements a lightweight custom A/B test without a third-party platform.
FAQ
What environment variables are required?
The template needs STATSIG_SERVER_API_KEY, NEXT_PUBLIC_STATSIG_CLIENT_KEY, STATSIG_CONSOLE_API_KEY, GLOBAL_CONFIG, and GLOBAL_CONFIG_ITEM_KEY. They are set in .env.local and are also preconfigured in the one-click deploy flow.
How do I deploy this example?
Use the one-click deploy button on the repository page, or clone and run create-next-app with the example URL. The deploy flow includes the Statsig Vercel Integration and prompts for the required environment variables.
Does this template run experiments in Edge Middleware?
Yes. The example uses Vercel Edge Middleware to evaluate Statsig experiments at the edge, which reduces the amount of client-side JavaScript and helps improve Cumulative Layout Shift (CLS).
Can I use this with my own Statsig account?
Yes. You need to obtain API keys from the Statsig console (Settings -> API KEYS) and set up a Global Config connection string and item key via the Statsig Vercel Integration.
What is the difference between this and the simple A/B test example?
The ab-testing-simple example implements a basic cookie-based A/B test, while this Statsig example uses a full experimentation platform with Global Config, edge evaluation, and integration with Statsig's console.
