Skip to content
Avatar of vercelvercel/examples

Hypertune Integration example

Learn to use Hypertune, a powerful feature flag, A/B testing and app configuration platform.

Framework
Hypertune template

Feature flags, A/B testing and app configuration with Hypertune and Vercel Edge Config

Hypertune is a powerful feature flag, A/B testing and app configuration platform. Optimized for Next.js, Vercel Edge Config and TypeScript. Built with full type-safety and Git version control.

No need to juggle different SDKs for the client and the server. Install one JavaScript SDK that works on both the client and the server and is ready for the new App Router paradigm with React Server Components.

Avoid cumulative layout shift, flickers, out-of-sync client hydration and page load delay. Instantly initialize the SDK on the server from Vercel Edge Config. And instantly initialize the SDK on the client from server props on the first render.

Get auto-generated type-safe code for all your flags. No Uncaught ReferenceError: flag is not defined, no raw strings, no typos and no struggling to find flag references or clean up stale flags.

This example uses Vercel Edge Config to initialize the Hypertune SDK with near-zero latency on the server, so you can access your feature flags and run A/B tests with no performance impact to your app.

Deploy with Vercel

Deploy this example with Vercel in one click:

You'll be guided through installing the Hypertune Vercel integration and setting up the required environment variables.

Update your feature flag logic

Once you've deployed your project, open the Hypertune console to update your feature flag logic.

Develop your project locally

  1. Clone your project's repository and cd into it
  2. Run vercel link to link to the Vercel project
  3. Run vercel env pull .env.development.local to pull your environment variables
  4. Run npm i
  5. Run npm run dev

This example assumes your Hypertune project has an exampleFlag feature flag.

Add new feature flags

To add a new feature flag, create it in the Hypertune console, then regenerate the client with npx hypertune so you can access it with end-to-end type-safety.

Hypertune template
Avatar of vercelvercel/examples

Hypertune Integration example

Learn to use Hypertune, a powerful feature flag, A/B testing and app configuration platform.

Framework

Feature flags, A/B testing and app configuration with Hypertune and Vercel Edge Config

Hypertune is a powerful feature flag, A/B testing and app configuration platform. Optimized for Next.js, Vercel Edge Config and TypeScript. Built with full type-safety and Git version control.

No need to juggle different SDKs for the client and the server. Install one JavaScript SDK that works on both the client and the server and is ready for the new App Router paradigm with React Server Components.

Avoid cumulative layout shift, flickers, out-of-sync client hydration and page load delay. Instantly initialize the SDK on the server from Vercel Edge Config. And instantly initialize the SDK on the client from server props on the first render.

Get auto-generated type-safe code for all your flags. No Uncaught ReferenceError: flag is not defined, no raw strings, no typos and no struggling to find flag references or clean up stale flags.

This example uses Vercel Edge Config to initialize the Hypertune SDK with near-zero latency on the server, so you can access your feature flags and run A/B tests with no performance impact to your app.

Deploy with Vercel

Deploy this example with Vercel in one click:

You'll be guided through installing the Hypertune Vercel integration and setting up the required environment variables.

Update your feature flag logic

Once you've deployed your project, open the Hypertune console to update your feature flag logic.

Develop your project locally

  1. Clone your project's repository and cd into it
  2. Run vercel link to link to the Vercel project
  3. Run vercel env pull .env.development.local to pull your environment variables
  4. Run npm i
  5. Run npm run dev

This example assumes your Hypertune project has an exampleFlag feature flag.

Add new feature flags

To add a new feature flag, create it in the Hypertune console, then regenerate the client with npx hypertune so you can access it with end-to-end type-safety.

Unleash New Possibilities

Deploy your app on Vercel and unlock its full potential