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
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 i -g vercel@latest
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 i next
terminalnpx 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:
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:
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:
{
body: null,
path: "/api/edge-function-example",
query: "?query=123",
cookies: [
...
],
};
Edge Functions API
Learn more about the Edge Runtime and its supported APIs.
@vercel/edge Reference
Learn about the @vercel/edge package and its available helpers.
Edge Streaming
Learn how to fetch streamable data in Edge Functions.
Using WebAssembly at the Edge
Learn how to use WebAssembly to enable low-level languages at the Edge.
Open Graph (OG) Image Generation
Learn how to optimize social media image generation.
Was this helpful?