Quickstart for Using Edge Functions

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

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

Select your preferred framework below to get started. The implementation of the Edge Function will differ depending on the framework you choose.

Create a new Next.js project

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

terminal

npx create-next-app@latest --typescript

Follow the prompts to set your project up. When you open the project, notice that it comes with a single API Route.

Add code to your function

Add the following code to your function:

Next.js
Other frameworks

pages/api/hello.ts

import { NextRequest, NextResponse } from 'next/server';
 
export const config = {
  runtime: 'edge',
};
 
export default (req: NextRequest) => {
  return NextResponse.json({
    name: `Hello, from ${req.url} I'm now an Edge Function!`,
  });
};

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: 'edge'. This is required to create an Edge Function
Because the function will be executed in Vercel's Edge Runtime, it has the same signature as Edge Middleware

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

Deploy your function

Use the Vercel CLI to deploy your Edge Function:

terminal

vercel deploy

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

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

The function's Runtime will read Edge, and the Region will be the default region for all new projects, which is Washington, D.C., USA.

The Functions tab showing the runtime and region of the Edge Function.

Summary

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 of the function in your Vercel dashboard.

Key takeaways

Edge Functions have the same signature as Edge Middleware because they both execute on the Edge Runtime
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
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