Getting Started with Edge Config
You can get started with reading data from Edge Config within minutes by following this quickstart guide.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 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 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.
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.
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.
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:terminalvercel 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:middleware.tsimport { 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 enablingexperimental.allowMiddlewareResponseBody
innext.config.js
.Run your application locally and visit
localhost:3000/welcome
to see your greeting. The middleware intercepts requests tolocalhost: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.
Was this helpful?