---
title: "Split Integration example"
description: "Learn to use Split, a feature delivery platform that powers feature flag management, software experimentation and continuous delivery."
url: "https://vercel.com/templates/next.js/ab-testing-split"
links:
  repository: "https://github.com/vercel/examples/tree/main/edge-middleware/feature-flag-split"
  demo: "https://ab-testing-split.vercel.app"
  deploy: "https://vercel.com/new/clone?demo-title=Split+Integration+example&demo-description=Learn+to+use+Split%2C+a+feature+delivery+platform+that+powers+feature+flag+management%2C+software+experimentation+and+continuous+delivery.&demo-url=https%3A%2F%2Fab-testing-split.vercel.app&project-name=feature-flag-split&repository-name=feature-flag-split&repository-url=https%3A%2F%2Fgithub.com%2Fvercel%2Fexamples%2Ftree%2Fmain%2Fedge-middleware%2Ffeature-flag-split&env=SPLIT_SDK_CLIENT_API_KEY%2CEDGE_CONFIG%2CEDGE_CONFIG_SPLIT_ITEM_KEY&integration-ids=oac_bic40oWF5k9pDFboJhKYqMd1&edge-config-stores=%7B%22EDGE_CONFIG%22%3A%7B%7D%7D&demo-image=%2F%2Fimages.ctfassets.net%2Fe5382hct74si%2F3f82USFfemB12iq9b0vNh%2F7486e2345ad517f284e628554425d706%2Fedge-functions-feature-flag-split.vercel.app_.png"
---

# Split Integration example

Learn to use Split, a feature delivery platform that powers feature flag management, software experimentation and continuous delivery.

# A/B Testing with Split

[Split](https://www.split.io/) is a feature delivery platform that powers feature flag management, software experimentation and continuous delivery.

## Demo

https://ab-testing-split.vercel.app

## How to Use

You can choose from one of the following two methods to use this repository:

### One-Click Deploy

Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme):

[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/vercel/examples/tree/main/edge-middleware/feature-flag-split&env=SPLIT_SDK_CLIENT_API_KEY,GLOBAL_CONFIG,GLOBAL_CONFIG_SPLIT_ITEM_KEY&project-name=feature-flag-split&repository-name=feature-flag-split&integration-ids=oac_bic40oWF5k9pDFboJhKYqMd1&global-config-stores=%7B%22GLOBAL_CONFIG%22%3A%7B%7D%7D)

### Clone and Deploy

Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [pnpm](https://pnpm.io/installation) to bootstrap the example:

```bash
pnpm create next-app --example https://github.com/vercel/examples/tree/main/edge-middleware/feature-flag-split feature-flag-split
```

You'll need to have an account with [Split](https://www.split.io/signup/). Once that's done, copy the `.env.example` file in this directory to `.env.local` (which will be ignored by Git):

```bash
cp .env.example .env.local
```

Then open `.env.local` and set the environment variables to match the ones in your Split dashboard. Your keys should be available under Workspace settings - API Keys, in the admin settings of your organization.

#### Set up environment variables

Copy [.env.example](https://github.com/vercel/examples/tree/main/edge-middleware/feature-flag-split/.env.example) to `.env.local`:

```bash
cp .env.example .env.local
```

Then fill it with the following information:

- Log in to the [Split console](https://app.split.io/login) and navigate to **Profile -> Admin Settings -> API Keys -> SDK API Keys** to retreive your SDK API Key.

- Install the [Split Vercel Integration](https://vercel.com/integrations/split) for your project.
  Then fill in `.env.local` with the provided Global Config Item Key.

- You can find the Global Config Connection String on vercel.com -> Storage -> \[Your Global Config\] -> Projects. You can click Connect Project if your Global Config is not connected to any project yet. This will automatically create a token for you and set it up as an environment variable on your project. Note that you still need to provide it to your `.env.local` file. Otherwise, click on Tokens in the sidebar and find the token you want to use. Then click on the three dots of and select Copy Connection String.

- You also need to create feature flags called `New_Marketing_Page` and `New_About_Page`. You can set the user targeting to `Joe` and `Bobby` in whatever configuration you'd like as those users are used by this example.

Next, run Next.js in development mode:

```bash
pnpm dev
```

Deploy it to the cloud with [Vercel](https://vercel.com/new?utm_source=github&utm_medium=readme&utm_campaign=edge-middleware-eap) ([Documentation](https://nextjs.org/docs/deployment)).

## Related Templates

### [Maintenance Page](https://vercel.com/templates/next.js/maintenance-page)

This template shows how to quickly trigger a maintenance page using Edge Config

## Related Integrations

### [Split](https://vercel.com/marketplace/split)

No latency feature flags made easy

---

## Additional documentation

The [Vercel Knowledge Base](https://vercel.com/kb) contains guides and answers to common questions about Vercel, including deployment, framework configuration, domains, caching, and troubleshooting.