Vercel Edge Config

If your Next.js app is deployed on Vercel, you can use Edge Config to initialize the Hypertune SDK on the server with near-zero latency.

1. Install the integration

1. Go to the Hypertune page in the Vercel Integrations marketplace and click "Add Integration".

2. Select your Vercel team and project.

3. Continue and log into Hypertune.

4. Connect your Hypertune project to a new or existing Edge Config store. Copy the displayed environment variables for later. They contain your Hypertune Token, Edge Config Connection String and Edge Config Item Key.

5. Go to your Vercel dashboard and select the project you want to use the Hypertune integration with. Go to Settings > Environment Variables and add the following:

   1. NEXT_PUBLIC_HYPERTUNE_TOKEN, set to your Hypertune Token

   2. EDGE_CONFIG, set to your Edge Config Connection String

   3. EDGE_CONFIG_HYPERTUNE_ITEM_KEY, set to your Edge Config Item Key

2. Use the integration

Pull the environment variables to your .env.development.local file by running:

vercel env pull .env.development.local

Install the @vercel/edge-config package:

npm

npm install @vercel/edge-config

yarn

pnpm

Finally, update your getHypertune function to create an Edge Config client and pass it along with your Edge Config Item Key when creating the Hypertune source:

lib/getHypertune.ts

import 'server-only'
import { createClient } from '@vercel/edge-config'
import { VercelEdgeConfigInitDataProvider } from 'hypertune'
import { unstable_noStore as noStore } from 'next/cache'
import { createSource } from '@/generated/hypertune'

const hypertuneSource = createSource({
  token: process.env.NEXT_PUBLIC_HYPERTUNE_TOKEN!,
  initDataProvider:
    process.env.EDGE_CONFIG &&
    process.env.EDGE_CONFIG_HYPERTUNE_ITEM_KEY
      ? new VercelEdgeConfigInitDataProvider({
          edgeConfigClient: createClient(
            process.env.EDGE_CONFIG
          ),
          itemKey: process.env.EDGE_CONFIG_HYPERTUNE_ITEM_KEY,
        })
      : undefined,
})

export default async function getHypertune() {
  noStore()
  await hypertuneSource.initIfNeeded() // Check for flag updates

  return hypertuneSource.root({
    args: {
      context: {
        environment: process.env.NODE_ENV,
        user: {
          id: 'e23cc9a8-0287-40aa-8500-6802df91e56a',
          name: 'Example User',
          email: '[e-mail]',
        },
      },
    },
  })
}

That's it

Now the Hypertune SDK will initialize with near-zero latency on the server in Vercel's edge environment.