Using Edge Config with Statsig

Statsig is a statistics engine that enables you to automate A/B testing and make data-driven decisions at scale.

The Statsig integration enables you to replace hard-coded values in your application with dynamic values on the server.

Before using this integration, you should have:

1. The latest version of Vercel CLI. To check your version, use vercel --version. To install or update Vercel CLI, use:

   pnpm

   yarn

   npm

   pnpm i -g vercel@latest

2. A project. If you don't have one, you can run the following terminal commands to create a Next project:

   pnpm

   yarn

   npm

   pnpm i next

   terminal

   npx create-next-app@latest

3. A Vercel project. If you don't have one, see Creating a Project

4. An Edge Config. If you don't have one, follow the Edge Config quickstart

5. The Edge Config SDK:

   pnpm

   yarn

   npm

   pnpm i @vercel/edge-config

The following steps will walk you through:

• Configuring Vercel's Statsig integration
• Using the integration to manage Statsig experiments from your frontend code

1. Set up the Statsig integration

   Visit the Statsig page in the Integration Marketplace and select the Add Integration button. Then:

   1. Select a Vercel team and Vercel project for your integration to be applied to
   2. Log into Statsig
   3. Select or create a new Edge Config to connect to Statsig
   4. Statsig will provide you with a Connection String and Edge Config Item Key. Save both, as you'll need them later in the setup

2. Add your Environment Variables

   Navigate to your Vercel dashboard, and select the project you want to use the Statsig integration with.

   Under the Settings tab, navigate to Environment Variables, and add the following variables:

   1. EDGE_CONFIG: Set this to the value of your Connection String
   2. EDGE_CONFIG_ITEM_KEY: Set this to the value of your Edge Config Item Key

   See our Environment Variables documentation to learn more.

3. Use the Statsig integration in your code

   Statsig's statsig-node-vercel package offers an EdgeConfigDataAdapter class, which you can use to initialize Statsig experiments with Edge Config.

   The following example sets up a Statsig experiment with Edge Config in an Edge Middleware file, using the EDGE_CONFIG_ITEM_KEY enviroment variable.

   Next.js (/app)

   Next.js (/pages)

   Other frameworks

   middleware.ts

   TypeScript

   TypeScriptJavaScript

   import { NextResponse } from 'next/server';
   import type { NextRequest } from 'next/server';
   import Statsig from 'statsig-node';
   import { createClient } from '@vercel/edge-config';
   import { EdgeConfigDataAdapter } from 'statsig-node-vercel';
    
   export const config = {
     matcher: '/',
   };
    
   const edgeConfigClient = createClient(process.env.EDGE_CONFIG!);
   const dataAdapter = new EdgeConfigDataAdapter({
     edgeConfigClient: edgeConfigClient,
     edgeConfigItemKey: process.env.EDGE_CONFIG_ITEM_KEY!,
   });
    
   export async function middleware(request: NextRequest) {
     await Statsig.initialize('statsig-server-api-key-here', { dataAdapter });
    
     const experiment = await Statsig.getExperiment(
       { userID: 'exampleId' },
       'statsig_example_experiment',
     );
    
     // Do any other experiment actions here
    
     // Ensure that all logged events are flushed to Statsig servers before the middleware exits
     event.waitUntil(Statsig.flush());
    
     return NextResponse.next();
   }