Next.js Middleware

React 🟡 Mid

Definition

Code qui s'execute avant chaque requete dans Next.js, au niveau Edge. Permet la redirection, la reecriture d'URL, l'ajout de headers et l'auth.

Analogie

Comme un vigile a l'entree d'un batiment : il verifie ton badge avant de te laisser entrer dans n'importe quelle piece.

Exemple de code

// middleware.ts (racine du projet)
import { NextResponse } from 'next/server';

export function middleware(request) {
  const token = request.cookies.get('token');
  if (!token) return NextResponse.redirect(new URL('/login', request.url));
  return NextResponse.next();
}
export const config = { matcher: ['/dashboard/:path*'] };

Cas d'usage

Auth, redirection A/B testing, geolocalisation, rate limiting au niveau Edge.

Anti-pattern

Mettre de la logique lourde (requetes DB) dans le middleware Edge qui a des limitations runtime.
#nextjs#auth#edge