Tutorial

Getting Started with Edge Config

You can get started with reading data from Edge Config within minutes by following this quickstart guide.
Table of Contents

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:

  • 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. Navigate to the Project you'd like to add an Edge Config store to. Click on the Storage 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.

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

  2. 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. 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. 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. 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 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
    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 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.

Your Edge Config uses the public internet for reads when you develop locally. Therefore, you will see higher response times. However, when you deploy your application to Vercel, the reads are optimized to happen at ultra low latency without any network requests.

Last updated on August 13, 2024