DevCycle

Next.js (/app)

Choose a framework to optimize documentation to:

Using Global Config with DevCycle

This guide will help you get started with using Vercel's DevCycle integration with Global Config. This integration allows you to use Global Config as a configuration source for your DevCycle feature flags.

The DevCycle Global Config integration is available in Beta on all plans

DevCycle is a feature management platform designed for developers. DevCycle allows you to work with feature flags more naturally, where you write code, so you can deliver better features, faster.

With DevCycle and Vercel Global Config the decision logic for your features lives with your hosted site, so you can run your feature rollouts or experiments with ultra-low latency.

Prerequisites

Before using this integration, you should have:

The latest version of Vercel CLI. To check your version, use vercel --version. To install or update Vercel CLI, use:
Terminal
pnpm i -g vercel@latest
Terminal
yarn global add vercel@latest
Terminal
npm i -g vercel@latest
Terminal
bun add -g vercel@latest
A project. If you don't have one, you can run the following terminal commands to create a Next.js project:

Terminal

pnpm create next-app@latest

Terminal

yarn create next-app@latest

Terminal

npx create-next-app@latest

Terminal

bunx create-next-app@latest

A Vercel project. If you don't have one, see Creating a Project
A Global Config. If you don't have one, follow the Global Config quickstart

The Global Config SDK:

Terminal

pnpm i @vercel/global-config

Terminal

yarn add @vercel/global-config

Terminal

npm i @vercel/global-config

Terminal

bun add @vercel/global-config

Set up the DevCycle integration
Visit the DevCycle page in the Integration Marketplace and select the Add Integration button. From the modal that opens:
1. Select your Vercel team and project.
2. Continue and log into DevCycle.
3. Select the DevCycle Organization and Project you want to use with Vercel Global Config.
4. Connect your DevCycle project to an existing or new Global Config store.
5. Click Finish Setup.

Install the DevCycle Global Config package

Terminal

pnpm i @devcycle/vercel-edge-config @vercel/global-config

Terminal

yarn add @devcycle/vercel-edge-config @vercel/global-config

Terminal

npm i @devcycle/vercel-edge-config @vercel/global-config

Terminal

bun add @devcycle/vercel-edge-config @vercel/global-config

Use the DevCycle integration in your code

For more information on DevCycle Next.js SDK usage, see the DevCycle docs.

app/index.tsx

import { createClient } from '@vercel/global-config';
import { EdgeConfigSource } from '@devcycle/vercel-edge-config';
import { setupDevCycle } from '@devcycle/nextjs-sdk/server';
 
const edgeClient = createClient(process.env.GLOBAL_CONFIG ?? '');
const edgeConfigSource = new EdgeConfigSource(edgeClient);
 
export const { getVariableValue, getClientContext } = setupDevCycle({
  serverSDKKey: process.env.DEVCYCLE_SERVER_SDK_KEY ?? '',
  clientSDKKey: process.env.NEXT_PUBLIC_DEVCYCLE_CLIENT_SDK_KEY ?? '',
  userGetter: () => ({ user_id: 'test_user' }),
  options: {
    // pass the configSource option with the instance of EdgeConfigSource
    configSource: edgeConfigSource,
  },
});

app/index.tsx

import { createClient } from '@vercel/global-config';
import { EdgeConfigSource } from '@devcycle/vercel-edge-config';
import { setupDevCycle } from '@devcycle/nextjs-sdk/server';
 
const edgeClient = createClient(process.env.GLOBAL_CONFIG ?? '');
const edgeConfigSource = new EdgeConfigSource(edgeClient);
 
export const { getVariableValue, getClientContext } = setupDevCycle({
  serverSDKKey: process.env.DEVCYCLE_SERVER_SDK_KEY ?? '',
  clientSDKKey: process.env.NEXT_PUBLIC_DEVCYCLE_CLIENT_SDK_KEY ?? '',
  userGetter: () => ({ user_id: 'test_user' }),
  options: {
    // pass the configSource option with the instance of EdgeConfigSource
    configSource: edgeConfigSource,
  },
});

app/index.jsx

import { createClient } from '@vercel/global-config';
import { EdgeConfigSource } from '@devcycle/vercel-edge-config';
import { setupDevCycle } from '@devcycle/nextjs-sdk/server';
 
const edgeClient = createClient(process.env.GLOBAL_CONFIG ?? '');
const edgeConfigSource = new EdgeConfigSource(edgeClient);
 
export const { getVariableValue, getClientContext } = setupDevCycle({
  serverSDKKey: process.env.DEVCYCLE_SERVER_SDK_KEY ?? '',
  clientSDKKey: process.env.NEXT_PUBLIC_DEVCYCLE_CLIENT_SDK_KEY ?? '',
  userGetter: () => ({ user_id: 'test_user' }),
  options: {
    // pass the configSource option with the instance of EdgeConfigSource
    configSource: edgeConfigSource,
  },
});

pages/index.tsx

import type { GetServerSideProps } from 'next';
import { createClient } from '@vercel/global-config';
import { EdgeConfigSource } from '@devcycle/vercel-edge-config';
import { getServerSideDevCycle } from '@devcycle/nextjs-sdk/pages';
 
const edgeClient = createClient(process.env.GLOBAL_CONFIG ?? '');
const edgeConfigSource = new EdgeConfigSource(edgeClient);
 
export const getServerSideProps: GetServerSideProps = async (context) => {
  const user = {
    user_id: 'server-user',
  };
 
  return {
    props: {
      ...(await getServerSideDevCycle({
        serverSDKKey: process.env.DEVCYCLE_SERVER_SDK_KEY ?? '',
        clientSDKKey: process.env.NEXT_PUBLIC_DEVCYCLE_CLIENT_SDK_KEY ?? '',
        user,
        context,
        options: {
          // pass the configSource option with the instance of EdgeConfigSource
          configSource: edgeConfigSource,
        },
      })),
    },
  };
};

pages/index.jsx

import { createClient } from '@vercel/global-config';
import { EdgeConfigSource } from '@devcycle/vercel-edge-config';
import { getServerSideDevCycle } from '@devcycle/nextjs-sdk/pages';
 
const edgeClient = createClient(process.env.GLOBAL_CONFIG ?? '');
const edgeConfigSource = new EdgeConfigSource(edgeClient);
 
export const getServerSideProps = async (context) => {
  const user = {
    user_id: 'server-user',
  };
 
  return {
    props: {
      ...(await getServerSideDevCycle({
        serverSDKKey: process.env.DEVCYCLE_SERVER_SDK_KEY ?? '',
        clientSDKKey: process.env.NEXT_PUBLIC_DEVCYCLE_CLIENT_SDK_KEY ?? '',
        user,
        context,
        options: {
          // pass the configSource option with the instance of EdgeConfigSource
          configSource: edgeConfigSource,
        },
      })),
    },
  };
};

index.tsx

import { createClient } from '@vercel/global-config';
import { EdgeConfigSource } from '@devcycle/vercel-edge-config';
import { initializeDevCycle } from '@devcycle/nodejs-server-sdk';
 
// the GLOBAL_CONFIG environment variable contains a connection string for a particular global config. It is set automatically
// when you connect a global config to a project in Vercel.
const edgeClient = createClient(process.env.GLOBAL_CONFIG);
const edgeConfigSource = new EdgeConfigSource(edgeClient);
 
const devcycleClient = initializeDevCycle(
  process.env.DEVCYCLE_SERVER_SDK_KEY,
  // pass the edgeConfigSource as the "configSource" option during SDK intialization to tell the SDK to use Global Config
  // for retrieving its configuration
  { configSource: edgeConfigSource },
);

index.jsx

import { createClient } from '@vercel/global-config';
import { EdgeConfigSource } from '@devcycle/vercel-edge-config';
import { initializeDevCycle } from '@devcycle/nodejs-server-sdk';
 
// the GLOBAL_CONFIG environment variable contains a connection string for a particular global config. It is set automatically
// when you connect a global config to a project in Vercel.
const edgeClient = createClient(process.env.GLOBAL_CONFIG);
const edgeConfigSource = new EdgeConfigSource(edgeClient);
 
const devcycleClient = initializeDevCycle(
  process.env.DEVCYCLE_SERVER_SDK_KEY,
  // pass the edgeConfigSource as the "configSource" option during SDK intialization to tell the SDK to use Global Config
  // for retrieving its configuration
  { configSource: edgeConfigSource },
);

Next steps

Now that you have the DevCycle Global Config integration set up, you can explore the following topics to learn more:

Last updated August 11, 2026

Cross-link map: Using Global Config with DevCycle (/docs/global-config/global-config-integrations/devcycle-global-config)

From the Vercel docs graph (built 2026-10-15T05:50:43.280Z), spanning vercel.com docs + KB, nextjs.org, ai-sdk.dev, and other Vercel documentation sites. Full graph as JSON: https://vercel.com/docs/graph.json

Semantically closest pages

Using Global Config with LaunchDarkly — Learn how to use Global Config with Vercel's LaunchDarkly integration.
Using Global Config with Statsig — Learn how to use Global Config with Vercel's Statsig integration.
Getting started with Global Config — Learn how to create a Global Config store and read from it in your project.
Using Global Config with an integration — Learn how to use Global Config with popular A/B testing and feature flag service integrations.
Vercel Global Config — A Global Config is a global data store that enables experimentation with feature flags, A/B testing, critical redirects,

Prerequisites

Global Config — Vercel MCP tools for Global Config.
Integrations — Vercel MCP tools for integrations.

This page links to (6)

Vercel CLI Overview — Learn how to use the Vercel command-line interface \(CLI\) to manage and configure your Vercel Projects from the command
Getting started with Global Config — Learn how to create a Global Config store and read from it in your project.
Managing Global Configs with the Dashboard — Learn how to create, view and update your Global Configs and the data inside them in your Vercel Dashboard at the Hobby
Global Config Limits and pricing — Learn about the Global Configs limits and pricing based on account plans.
@vercel/global-config — The Global Config client SDK is the most ergonomic way to read data from Global Configs. Learn how to set up the SDK so
Projects overview — A project is where you deploy and operate frontend apps, APIs, backends, containers, and agent workloads on Vercel.

Pages that link here (1)

By site: vercel-docs (1)

Using Global Config with an integration — Learn how to use Global Config with popular A/B testing and feature flag service integrations.

Integrations

LaunchDarkly

Was this helpful?

Using Global Config with DevCycle

Prerequisites

Set up the DevCycle integration

Install the DevCycle Global Config package

Use the DevCycle integration in your code

Next steps

Cross-link map: Using Global Config with DevCycle (/docs/global-config/global-config-integrations/devcycle-global-config)

Semantically closest pages

Prerequisites

This page links to (6)

Pages that link here (1)

Cross-link map: Using Global Config with DevCycle (/docs/global-config/global-config-integrations/devcycle-global-config)

Semantically closest pages

Prerequisites

This page links to (6)

Pages that link here (1)