Skip to content
Tutorial
5 min read
Table of Contents
Choose a framework to optimize documentation to:

In this quickstart guide, you'll learn how to get started with Edge Functions on Vercel. The guide will cover:

  • Creating an Edge Function
  • Deploying an Edge Function with Vercel CLI
  1. You should have the latest version of Vercel CLI installed. To check your version, use vercel --version. To install or update Vercel CLI, use:

    pnpm
    yarn
    npm
    pnpm i -g vercel@latest
  2. You should have an existing project. If you don't have one, you can run the following terminal commands to create a Next project:

    pnpm
    yarn
    npm
    pnpm i next
    terminal
    npx create-next-app@latest

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

In the app directory:

Create /api/edge-function-example/route.ts

Then, add the following code, which will return the body, path query, and cookies from the request object as JSON:

Next.js (/app)
Next.js (/pages)
Other frameworks
app/api/edge-function-example/route.ts
import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';
 
export const runtime = 'edge'; // 'nodejs' is the default
 
export function GET(request: NextRequest) {
  return NextResponse.json(
    {
      body: request.body,
      query: request.nextUrl.search,
      cookies: request.cookies.getAll(),
    },
    {
      status: 200,
    },
  );
}

Notice that in the above code, we export a segment config option, allowing us to define the runtime as "edge".

Use next dev to start a local development server:

terminal
next dev

Navigate to http://localhost:3000/api/edge-function-example?query=123 to see the response from your route.

You should see a response similar to the following:

Response
{
  body: null,
  path: "/api/edge-function-example",
  query: "?query=123",
  cookies: [
    ...
  ],
};
Last updated on February 20, 2023