Skip to content
Learni
View all tutorials
Développement Web

How to Create Edge Functions on Netlify in 2026

12 minBEGINNER
TypeScriptNetlifyEdge Functions
Lire en français

Introduction

Netlify Edge Functions execute JavaScript or TypeScript code at the network edge, close to end users. This approach dramatically cuts latency compared to traditional serverless functions. In 2026 they are essential for high-performance applications, enabling real-time personalization, instant geolocation, and advanced request handling. This tutorial shows you how to build them from scratch with production-ready code.

Prerequisites

  • Free Netlify account
  • Node.js 18 or higher
  • Basic JavaScript/TypeScript knowledge
  • Netlify CLI installed (npm install -g netlify-cli)

Initialize the Project

terminal
mkdir netlify-edge-demo
cd netlify-edge-demo
npm init -y
netlify init

This command creates a new folder and initializes a Netlify site. The netlify/ directory will be automatically detected for Edge Functions.

Create a Basic Function

netlify/edge-functions/hello.ts
import type { Config, Context } from "@netlify/edge-functions";

export default async (request: Request, context: Context) => {
  return new Response("Bonjour depuis l'Edge !");
};

export const config: Config = {
  path: "/api/hello",
};

This code defines a simple Edge Function that responds at /api/hello. The file must be placed inside netlify/edge-functions/ to be deployed automatically.

Add HTTP Headers

netlify/edge-functions/headers.ts
import type { Config, Context } from "@netlify/edge-functions";

export default async (request: Request, context: Context) => {
  const response = new Response("Hello with headers");
  response.headers.set("X-Custom-Header", "Netlify-Edge");
  return response;
};

export const config: Config = {
  path: "/api/headers",
};

Custom headers let you control caching, security, and CORS directly from the edge for optimized responses.

Use Geolocation

netlify/edge-functions/geo.ts
import type { Config, Context } from "@netlify/edge-functions";

export default async (request: Request, context: Context) => {
  const country = context.geo?.country?.name || "Unknown";
  return new Response(`Vous êtes au ${country}`);
};

export const config: Config = {
  path: "/api/geo",
};

The context.geo object provides accurate location data with zero added latency, perfect for regional personalization.

Read Environment Variables

netlify/edge-functions/env.ts
import type { Config, Context } from "@netlify/edge-functions";

export default async (request: Request, context: Context) => {
  const apiKey = Netlify.env.get("MY_API_KEY");
  return new Response(`Clé : ${apiKey}`);
};

export const config: Config = {
  path: "/api/env",
};

Netlify.env.get provides secure access to environment variables directly inside Edge Functions.

Best Practices

  • Keep functions lightweight (< 1 MB) for fast deployments
  • Use TypeScript for type safety
  • Test locally with netlify dev
  • Limit external dependencies
  • Enable caching whenever possible

Common Mistakes to Avoid

  • Forgetting to export the path config
  • Using unsupported Node.js APIs at the edge
  • Neglecting async error handling
  • Exceeding the 50ms CPU time limit

Going Further

Explore the Learni courses to master Netlify, advanced Edge Functions, and web performance optimization.