middleware.js

Le fichier middleware.js|ts est utilisé pour écrire du Middleware et exécuter du code côté serveur avant qu'une requête ne soit complétée. En fonction de la requête entrante, vous pouvez modifier la réponse en réécrivant, redirigeant, modifiant les en-têtes de requête ou de réponse, ou en répondant directement.

Le Middleware s'exécute avant le rendu des routes. Il est particulièrement utile pour implémenter une logique serveur personnalisée comme l'authentification, la journalisation ou la gestion des redirections.

Utilisez le fichier middleware.ts (ou .js) à la racine de votre projet pour définir le Middleware. Par exemple, au même niveau que app ou pages, ou dans src si applicable.

import { NextResponse, NextRequest } from 'next/server'

// Cette fonction peut être marquée `async` si vous utilisez `await` à l'intérieur
export function middleware(request: NextRequest) {
  return NextResponse.redirect(new URL('/home', request.url))
}

export const config = {
  matcher: '/about/:path*',
}

import { NextResponse } from 'next/server'

// Cette fonction peut être marquée `async` si vous utilisez `await` à l'intérieur
export function middleware(request) {
  return NextResponse.redirect(new URL('/home', request.url))
}

export const config = {
  matcher: '/about/:path*',
}

Exports

Fonction Middleware

Le fichier doit exporter une seule fonction, soit comme export par défaut, soit nommée middleware. Notez que plusieurs Middleware dans le même fichier ne sont pas pris en charge.

// Exemple d'export par défaut
export default function middleware(request) {
  // Logique du Middleware
}

Objet config (optionnel)

Optionnellement, un objet config peut être exporté avec la fonction Middleware. Cet objet inclut le matcher pour spécifier les chemins où le Middleware s'applique.

Matcher

L'option matcher vous permet de cibler des chemins spécifiques pour l'exécution du Middleware. Vous pouvez spécifier ces chemins de plusieurs manières :

• Pour un seul chemin : Utilisez directement une chaîne pour définir le chemin, comme '/about'.
• Pour plusieurs chemins : Utilisez un tableau pour lister plusieurs chemins, comme matcher: ['/about', '/contact'], ce qui applique le Middleware à la fois à /about et /contact.

De plus, matcher prend en charge des spécifications de chemins complexes via des expressions régulières, comme matcher: ['/((?!api|_next/static|_next/image|.*\\.png$).*)'], permettant un contrôle précis des chemins à inclure ou exclure.

L'option matcher accepte également un tableau d'objets avec les clés suivantes :

• source : Le chemin ou le motif utilisé pour correspondre aux chemins de requête. Il peut s'agir d'une chaîne pour une correspondance directe ou d'un motif pour une correspondance plus complexe.
• regexp (optionnel) : Une chaîne d'expression régulière qui affine la correspondance basée sur la source. Elle fournit un contrôle supplémentaire sur les chemins inclus ou exclus.
• locale (optionnel) : Un booléen qui, lorsqu'il est défini sur false, ignore le routage basé sur les locales dans la correspondance de chemins.
• has (optionnel) : Spécifie des conditions basées sur la présence d'éléments spécifiques de la requête tels que des en-têtes, des paramètres de requête ou des cookies.
• missing (optionnel) : Se concentre sur les conditions où certains éléments de la requête sont absents, comme des en-têtes ou des cookies manquants.

export const config = {
  matcher: [
    {
      source: '/api/*',
      regexp: '^/api/(.*)',
      locale: false,
      has: [
        { type: 'header', key: 'Authorization', value: 'Bearer Token' },
        { type: 'query', key: 'userId', value: '123' },
      ],
      missing: [{ type: 'cookie', key: 'session', value: 'active' }],
    },
  ],
}

Paramètres

request

Lors de la définition du Middleware, la fonction d'export par défaut accepte un seul paramètre, request. Ce paramètre est une instance de NextRequest, qui représente la requête HTTP entrante.

import type { NextRequest } from 'next/server'

export function middleware(request: NextRequest) {
  // La logique du Middleware va ici
}

export function middleware(request) {
  // La logique du Middleware va ici
}

Bon à savoir :

• NextRequest est un type qui représente les requêtes HTTP entrantes dans le Middleware Next.js, tandis que NextResponse est une classe utilisée pour manipuler et renvoyer des réponses HTTP.

NextResponse

Le Middleware peut utiliser l'objet NextResponse qui étend l'API Web Response. En retournant un objet NextResponse, vous pouvez directement manipuler les cookies, définir des en-têtes, implémenter des redirections et réécrire des chemins.

Bon à savoir : Pour les redirections, vous pouvez également utiliser Response.redirect au lieu de NextResponse.redirect.

Runtime

Le Middleware ne prend en charge que le runtime Edge. Le runtime Node.js ne peut pas être utilisé.

Historique des versions