Get started with Edge Functions
This page will help you get started with Edge Functions. It describes how to create, test, deploy, invoke, and monitor your edge functions.
Create an edge function
Section titled “Create an edge function”To create an edge function to deploy with your site, write a JavaScript or TypeScript file stored in your edge functions directory. The default edge functions directory is YOUR_BASE_DIRECTORY/netlify/edge-functions.
For example, create a function file at netlify/edge-functions/hello.js:
export default () => new Response("Hello world");
export const config = { path: "/test" };The file includes two parts:
- The default export contains the handler function that runs when you make requests to the edge function. It often contains logic to modify requests and responses.
- The
configexport configures the file as an edge function and provides the path on which the edge function will be invoked.
In this example, requests to /test will trigger the edge function and it will respond with Hello world.
Edge functions with .jsx or .tsx
Section titled “Edge functions with .jsx or .tsx”You also have the option to use .jsx and .tsx files for your edge functions. This can be helpful if you want your function to handle server-side rendering (SSR) at the network edge.
For example, this .tsx file contains the code to stream React SSR at the edge without a meta-framework:
import React from "https://esm.sh/react";import { renderToReadableStream } from "https://esm.sh/react-dom/server";import type { Config, Context } from "@netlify/edge-functions";
export default async function handler(req: Request, context: Context) { const stream = await renderToReadableStream( <html> <title>Hello</title> <body> <h1>Hello {context.geo.country?.name}</h1> </body> </html> );
return new Response(stream, { status: 200, headers: { "Content-Type": "text/html" }, });}
export const config: Config = { path: "/hello",};