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

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

vercel env pull .env.development.local

Install the Vercel Edge Config package:

npm install @vercel/edge-config

Update your hypertune.ts to create an Edge Config client and pass it along with your Edge Config Item Key when initializing the Hypertune SDK:

import { createClient } from "@vercel/edge-config";
import { VercelEdgeConfigInitDataProvider } from "hypertune";
import { initHypertune } from "./generated/hypertune";

const hypertune = initHypertune({
  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 hypertune;

That's it

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

Last updated