Getting Started with Edge Config

Navigate to the Project you'd like to add an Edge Config store to. Click on the Edge Config tab, then click the Connect Store button.

Create a new store by typing hello_world_store under Edge Config in the dialog that opens, and click Create.

Once created, select hello_world_store to see a summary of what was created for you. Notice the following:

• If you select Project, you'll see that your project was connected to the Edge Config by using an environment variable. If you go to your projects's Settings > Environment Variables, you'll see the newly created environment variable.
• If you select Tokens, you'll see a read access token. This token, along with your EDGE CONFIG ID, is used to create a connection string. This connection string is saved as the value of your EDGE_CONFIG environment variable. This enables you to use the SDK in your project to read the store's contents.

Under Items, add the following key-value pair and click Save Items:

{
  "greeting": "hello world"
}

You can see more information about what can be stored in an Edge Config in the limits documentation.

Once you've created the store, you need to set up your project to read the contents of the store. This is detailed under Learn how to use this in code in the dashboard, but is described in the following steps in more detail.

On your local machine, connect your Vercel Project. If you haven't already, install the Edge Config SDK, as mentioned in prerequisites.

Using Vercel CLI, pull the latest environment variables, specifically EDGE_CONFIG, so that it's available to your project locally:

vercel env pull .env.development.local

Create Edge Middleware for your project by creating a new file called middleware.js at the root of the project and if using Next.js, add the following code:

import { NextResponse } from 'next/server';
import { get } from '@vercel/edge-config';
 
export const config = { matcher: '/welcome' };
 
export async function middleware() {
  const greeting = await get('greeting');
  return NextResponse.json(greeting);
}

Run your application locally and visit localhost:3000/welcome to see your greeting. The middleware intercepts requests to localhost:3000/welcome and responds with a greeting, read from your Edge Config store.