On this page

Vercel

Integrate Statsig with Vercel to evaluate feature gates and experiments in edge middleware, server components, and serverless functions on Vercel.

Statsig offers a suite of integration tools for use with Vercel:

  • Statsig automatically pushes project changes to Vercel's Edge Config, providing low-latency SDK startup.
  • Statsig provides a Vercel helper that handles client initialization and event flushing so you can focus on your business logic.

  1. Configure integration

    1. Go to the Vercel Marketplace and install the Statsig integration.
    2. Statsig prompts you to create a new account or link an existing one.

  2. Install the Statsig SDK

    bash
    npm install @statsig/vercel-edge

  3. import the Vercel helper

    bash
    import {handleWithStatsig} from '@statsig/vercel-edge

  4. Use the SDK

    Javascript
    export default handleWithStatsig(handler, params)

    The helper method takes two arguments:

    • handler Your Vercel function code
    • params
      ParameterOptionalTypeDescription
      configKeyNostringThe Key associated with your Statsig specs in your Edge Config
      envStatsigKeyNostringYour Statsig Client API Key
      statsigOptionsYesStatsigOptionsRefer to StatsigOptions

    Best practice: store configKey and envStatsigKey as environment variables in your Vercel project settings.

Example Usage

javascript
import { handleWithStatsig } from "@statsig/vercel-edge";

export const config = {runtime: 'edge'};

async function myHandler(request, client){
    const user = { userID: Math.random().toString().substring(2, 5) }; //Generates a random user id
    const passed = client.checkGate('test_vercel_edgeconfig', user);
    client.logEvent('vercel_wrapper', user, passed.toString());
    return new Response(
      JSON.stringify({ passed, user })
    );

export default handleWithStatsig(myHandler,{
    configKey : process.env.EDGE_CONFIG_KEY,
    statsigSdkKey: process.env.STATSIG_KEY
})

The helper automatically:

  • Initializes the Statsig Client with config specs from your Edge Config
  • Executes your Vercel function code (your business logic and Statsig usage)
  • Flushes all events after your handler completes execution
  • Cleans up resources

Advanced implementation

To review evaluations, go to the gate you created and check the Diagnostics tab.

Diagnostics Stream

To check the events you logged, in the Statsig Console, go to Data -> Events.

vercel_event example in Statsig showing lineage chart and log stream table

The Vercel Edge Config integration for Statsig is now working.

Using Flags SDK in NextJS

If you use NextJS in your Vercel project, you can use Statsig through Flags SDK and take advantage of built-in precompute patterns for improved performance. Refer to the Statsig Adapter for Flags SDK docs for setup steps. The marketplace app sets all required environment variables for the Flags SDK by default.

Sending logs to Statsig

You can connect your Vercel logs to Statsig with a Log Drain to start exploring them in Logs Explorer.

  1. From the Vercel dashboard, go to Settings -> Drains and click Add Drain -> Integration.
  2. Select Statsig, follow the configuration steps provided, and choose a project to connect with the service.
  3. Navigate to Statsig's Logs Explorer to see your logs flow through.

Was this helpful?