Hypertune

The @flags-sdk/hypertune package provides a managed Hypertune provider for the Flags SDK.

Learn more about Adapters

Install the required dependencies:

pnpm i hypertune flags server-only @flags-sdk/hypertune @vercel/edge-config

Set up Hypertune environment variables based on your framework and app structure:

NEXT_PUBLIC_HYPERTUNE_TOKEN=token
HYPERTUNE_FRAMEWORK=nextApp
HYPERTUNE_OUTPUT_DIRECTORY_PATH=generated

Read more about type-safe client generation on docs.hypertune.com.

Run Hypertune's code generation with npx hypertune.

Use the generated code to declare your feature flags with createHypertuneAdapter:

import { createHypertuneAdapter } from '@flags-sdk/hypertune'
import { type Identify } from 'flags'
import { dedupe, flag } from 'flags/next'
/** Generated with `npx hypertune` */
import {
  createSource,
  flagFallbacks,
  vercelFlagDefinitions as flagDefinitions,
  type Context,
  type FlagValues,
} from './generated/hypertune'

const identify: Identify<Context> = dedupe(
  async ({ headers, cookies }) => {
    return {
      environment: process.env.NODE_ENV,
      user: {
        id: 'e23cc9a8-0287-40aa-8500-6802df91e56a',
        name: 'Example User',
        email: 'user@example.com',
      },
    }
  }
)

const hypertuneAdapter = createHypertuneAdapter<
  FlagValues,
  Context
>({ createSource, flagFallbacks, flagDefinitions, identify })

export const exampleFlag = flag(
  hypertuneAdapter.declarations.exampleFlag
)

Then use it in your framework:

import { exampleFlag } from '@/flags'

export default async function Page() {
  const exampleFlagValue = await exampleFlag()

  return <div>Example Flag: {String(exampleFlagValue)}</div>
}

You can inform the Flags Explorer about your Hypertune flags with a .well-known/vercel/flags route.

This lets you view and override your Hypertune flags using the Flags Explorer.

import { createFlagsDiscoveryEndpoint } from 'flags/next'
/** Generated with `npx hypertune` */
import { vercelFlagDefinitions } from '../../../../generated/hypertune'

export const GET = createFlagsDiscoveryEndpoint(() => {
  return { definitions: vercelFlagDefinitions }
})

Learn more about the Flags Explorer

If Hypertune is syncing to Vercel Edge Config, you can configure that through environment variables or through the adapter.

EXPERIMENTATION_CONFIG="https://edge-config.vercel.com/ecfg_xyz?token=abc"
EXPERIMENTATION_CONFIG_ITEM_KEY="hypertune_99999"

import { VercelEdgeConfigInitDataProvider } from 'hypertune'
import { createClient } from "@vercel/edge-config"

const hypertuneAdapter = createHypertuneAdapter<
  FlagValues,
  Context
>({
  // ... previous initialization code
  createSourceOptions: {
    initDataProvider: new VercelEdgeConfigInitDataProvider({
      edgeConfigClient: createClient(
        'https://edge-config.vercel.com/ecfg_xyz?token=abc'
      ),
      itemKey: 'hypertune_99999',
    }),
  },
})

推荐订阅源

Flags SDK Documentation