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*',
}

Exports

Fonction Middleware

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

// 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 chemin 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 faire correspondre les 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 la locale dans la correspondance des chemins.
• has (optionnel) : Spécifie des conditions basées sur la présence d'éléments spécifiques de la requête tels que les en-têtes, les paramètres de requête ou les 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
}

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 utilise par défaut le runtime Edge. Si vous ne le souhaitez pas, vous pouvez utiliser le runtime Node.js complet pour exécuter le Middleware.

Historique des versions