Skip to content

Edge Functions QuickstartBeta

Learn how to get started with Edge Functions on Vercel using Vercel CLI, or Next.js
Warning: Vercel Edge Functions are currently in Beta. The API might change as we look to continually make improvements.

In this quickstart guide, you'll learn how to get started with Edge Functions using the Vercel CLI or Next.js. For information on the API and how to use it, see the Edge Functions API documentation.

You should have the latest version (>= v25) of the Vercel CLI. To check your version, use vc --version. To install or update the CLI, use:

npm i -g vercel@latest

Before you begin, ensure that your app is using the most recent version of Next.js:

npm install next@canary

Use create-next-app to create a new Next.js project:

npx create-next-app@latest --typescript

Follow the prompts to set your project up. You'll be using the TypeScript variant of the starter project as you will be importing some helpers from next/server in later steps.

When you open the project, notice that it comes with a single API Route (hello.ts):

Add the following code to your function:

import { NextRequest, NextResponse } from 'next/server';

export default (req: NextRequest) => {
  return NextResponse.json({
    name: `Hello, from ${req.url} I'm now an Edge Function!`,
  });
};

export const config = {
  runtime: 'experimental-edge',
};

This code does a couple of important things that you should be aware of:

  • We're importing a helper from next/server, which extends the native Response object. This is not a requirement
  • We specify the function's runtime with an exported config object: runtime: 'experimental-edge'. This is required to create an Edge Function.
  • Because the function is using the Edge Runtime, it's signature can follow the same syntax as Edge Middleware

Note that you cannot use Node.js APIs in Edge Functions. See the Limitations section for more information.

Use the Vercel CLI to deploy your Edge Function:

vercel deploy

Follow the prompts to deploy your function and once done, open the Production link.

From your dashboard click on the deployed project and choose the Functions tab. This tab displays logs from any running functions within your project. Use the dropdown to select the api/hello function.

The runtime of the function will read Edge, and the region will be the closest region to you.

The Functions tab showing the runtime and region of the hello.ts function.

Congratulations! You have now created a new Next.js project and deployed it as an Edge Function. You also learned about the important parts of creating the function and how to see the runtime and regions the function in your Vercel dashboard.

  • The signature of an Edge Function matches that of Edge Middleware because they both use the same APIs.
  • Edge Functions export a custom config object that specifies which runtime to use. In the case of Edge Functions, the runtime is the Edge Runtime
  • Unlike Edge Middleware, they can return responses
  • Helpers that extend the native Response, Event, and Request objects can be imported from next/server
  • You cannot use Node.js APIs in Edge Functions