Skip to content
Learni
Voir tous les tutoriels
Développement Web

Comment créer des Edge Functions sur Netlify en 2026

12 minBEGINNER
TypeScriptNetlifyEdge Functions
Read in English

Introduction

Les Edge Functions Netlify exécutent du code JavaScript ou TypeScript à la périphérie du réseau, près des utilisateurs. Cela réduit drastiquement la latence par rapport aux fonctions serverless classiques. En 2026, elles sont essentielles pour les applications performantes : personnalisation en temps réel, géolocalisation instantanée et gestion avancée des requêtes. Ce tutoriel vous apprend à les créer de zéro avec du code prêt à l'emploi.

Prérequis

  • Compte Netlify gratuit
  • Node.js 18 ou supérieur
  • Connaissances basiques de JavaScript/TypeScript
  • CLI Netlify installée (npm install -g netlify-cli)

Initialiser le projet

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

Cette commande crée un nouveau dossier et initialise un site Netlify. Le dossier netlify/ sera automatiquement détecté pour les Edge Functions.

Créer une fonction basique

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",
};

Ce code définit une Edge Function simple qui répond sur /api/hello. Le fichier doit être placé dans netlify/edge-functions/ pour être déployé automatiquement.

Ajouter des en-têtes HTTP

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",
};

Les en-têtes personnalisés permettent de contrôler le cache, la sécurité et les CORS directement depuis l'Edge pour des réponses optimisées.

Utiliser la géolocalisation

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",
};

L'objet context.geo fournit des données de localisation précises sans latence, idéal pour la personnalisation régionale.

Lire les variables d'environnement

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 permet d'accéder aux variables d'environnement de manière sécurisée directement dans les Edge Functions.

Bonnes pratiques

  • Gardez les fonctions légères (< 1 Mo) pour des déploiements rapides
  • Utilisez TypeScript pour la sécurité des types
  • Testez localement avec netlify dev
  • Limitez les dépendances externes
  • Activez le cache quand c'est possible

Erreurs courantes à éviter

  • Oublier d'exporter la config path
  • Utiliser Node.js APIs non supportées à l'Edge
  • Négliger la gestion des erreurs async
  • Dépasser la limite de 50ms de temps CPU

Pour aller plus loin

Explorez les formations Learni pour maîtriser Netlify, les Edge Functions avancées et l'optimisation des performances web.