Getting Started with Edge Config

You can get started with reading data from Edge Config by creating a new store in the Storage tab of your Project. Follow the steps below to learn how to do so.

You can also create and configure your Edge Config at the account level for all use cases by:

• Creating the Edge Config at the account level
• Creating a read access token
• Setting up a connection string

• Install the Edge Config SDK:
  pnpm

  yarn

  npm

  pnpm i @vercel/edge-config

• An existing project. This quickstart uses Next.js, but you can use any supported framework with Edge Config storage
• Install or update to the latest version of Vercel CLI
  pnpm

  yarn

  npm

  pnpm i -g vercel@latest

In this quickstart, you'll create an Edge Config called hello_world_store at the project-level, through the Vercel dashboard. A token and environment variable EDGE_CONFIG, that stores the connection string, will be automatically created for you. We'll update the store with a key-value data pair and you'll then read the value of "greeting" from a local Next.js project.

1. Create an Edge Config store

   Navigate to the Project you'd like to add an Edge Config store to. Click on the Storage tab, then click the Create Database button. Select Edge Config and click Continue.

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

   The name can only contain alphanumeric letters, "_" and "-". It cannot exceed 32 characters.

2. Review what was created

   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.

   If you're creating a project at the account-level, we won't automatically create a token, connection string, and environment variable until a project has been connected.

3. Add a key-value pair

   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.

4. Connect your Vercel project

   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.

5. Pull the latest environment variables

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

   terminal

   vercel env pull .env.development.local

6. Create Edge Middleware

   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:

   middleware.ts

   TypeScript

   TypeScriptJavaScript

   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);
   }

   NextResponse.json requires at least Next v13.1 or enabling experimental.allowMiddlewareResponseBody in next.config.js.

7. Run your application locally

   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.

Your project is now ready to read more key-value data pairs from the hello_world_store Edge Config using the SDK or Vercel REST API.