Flags SDK Reference

The Flags SDK is a free, open-source library that gives you the tools you need to use feature flags in Next.js and SvelteKit applications. It works with any flag provider, custom setups, or no provider at all.

• Framework-native: Built specifically for Next.js (App Router, Pages Router, Middleware) and SvelteKit
• Provider-agnostic: Works with any flag provider or custom adapters
• Type-safe: Full TypeScript support with type inference
• Optimized for performance: Uses precompute pattern for static generation
• Integrated: Works seamlessly with Flags Explorer and Vercel observability features

Flags are defined using the flag() function. Each flag has a key and a decide function that returns the flag's value:

import { flag } from 'flags/next';
 
export const showNewFeature = flag({
  key: 'show-new-feature',
  decide: () => false,
  description: 'Show the new dashboard feature',
});

The decide function determines a flag's value. It can be sync or async, and can access request context:

export const experimentalUI = flag({
  key: 'experimental-ui',
  decide: async () => {
    const user = await getCurrentUser();
    return user?.betaAccess === true;
  },
});

Flags can have multiple options for A/B testing and experimentation:

export const theme = flag({
  key: 'theme',
  options: [
    { value: 'light', label: 'Light Theme' },
    { value: 'dark', label: 'Dark Theme' },
    { value: 'auto', label: 'Auto' },
  ],
  decide: () => 'auto',
});

The precompute pattern generates multiple versions of static pages with different flag values:

export const layoutVariant = flag({
  key: 'layout-variant',
  options: [
    { value: 'a' },
    { value: 'b' },
  ],
  decide: () => 'a',
});
 
export const precompute = [layoutVariant];

Learn more about precompute on flags-sdk.dev.

Call your flag functions to read their values:

const isEnabled = await showNewFeature();
const currentTheme = await theme();

Report flag values for observability (automatic with SDK):

import { reportValue } from 'flags';
 
reportValue('my-flag', true);

Handle flag overrides from Flags Explorer (automatic with SDK integrations):

import { getOverrides } from 'flags/next';
 
const overrides = await getOverrides();

Create a Flags API endpoint for Flags Explorer:

import { createFlagsDiscoveryEndpoint, getProviderData } from 'flags/next';
import * as flags from '#/flags';
 
export const GET = createFlagsDiscoveryEndpoint(async () => {
  return getProviderData(flags);
});

• Next.js: Getting started with Next.js
• SvelteKit: Getting started with SvelteKit

The Flags SDK works with many providers out of the box:

• Vercel
• LaunchDarkly
• Statsig
• Hypertune
• ConfigCat
• DevCycle
• Flipt
• Custom adapters

For the full API documentation, including all functions, types, and advanced patterns, visit:

• Core API reference
• Next.js API reference
• SvelteKit API reference
• React components

• Next.js Feature Flags Example
• More examples on flags-sdk.dev

• Get started with the quickstart
• Set up Flags Explorer
• Integrate with observability