Qu'est-ce qu'un middleware dans Next.js

Le middleware Next.js offre une personnalisation puissante pour la gestion des requêtes au sein de votre application. Il permet l'interception de requêtes pour effectuer des actions telles que la validation de session, la journalisation et la mise en cache. Cependant, une mise en œuvre inefficace d’un middleware peut avoir de graves conséquences sur les performances. Ce guide clarifie les fonctionnalités du middleware et les meilleures pratiques, vous aidant ainsi à comprendre quand et comment l'exploiter efficacement.

Qu'est-ce que le middleware Next.js ?

Le middleware Next.js comprend des fonctions exécutées automatiquement pour chaque requête entrante. Ces fonctions inspectent et modifient les données de la demande avant qu'elles n'atteignent le système de routage de votre application. Les applications incluent l'authentification, la journalisation et la gestion des erreurs. Par exemple, un middleware peut valider les sessions utilisateur en vérifiant les jetons, empêchant ainsi tout accès non autorisé.

Le middleware Next.js est hautement flexible et personnalisable. Vous pouvez créer des fonctions personnalisées pour répondre aux besoins spécifiques des applications, en définissant des paramètres ou des politiques à l'échelle de l'application. Cela simplifie la configuration du routage, évitant les configurations multicouches complexes. L'utilisation d'un middleware permet d'obtenir des applications plus robustes, évolutives et maintenables.

Ordre de traitement du middleware Next.js

Comprendre l'ordre des opérations lorsqu'une demande est reçue est crucial :

1. En-têtes : next.config.js les en-têtes sont appliqués en premier, définissant les en-têtes de requête initiaux. C'est idéal pour les en-têtes de sécurité tels que la politique de sécurité du contenu (CSP) ou CORS.

2. Redirections : next.config.js les redirections sont ensuite traitées, mappant les requêtes vers différentes URL. Cela gère la réécriture et les redirections d'URL, en gérant les règles de routage entre les pages ou l'ensemble de l'application.

3. Évaluation du middleware : Après les en-têtes et les redirections, le middleware est évalué et sa logique exécutée.

4. beforeFiles : next.config.js beforeFiles (réécritures) sont appliquées, permettant une réécriture supplémentaire ou une logique spécifique au fichier avant le routage.

5. Routes du système de fichiers : Les routes du système de fichiers de l'application sont traitées (par exemple, public/, _next/static/, pages et applications). Les fichiers statiques sont servis ici.

6. afterFiles : next.config.js afterFiles (réécritures) sont appliquées, offrant un point de modification final avant le routage dynamique.

7. Routages dynamiques : Les itinéraires dynamiques (par exemple, /blog/[slug]) sont gérés. Ceux-ci nécessitent une gestion et une réécriture spécifiques des variables ou des paramètres.

8. Repli : next.config.js le repli est appliqué, gérant les requêtes qui ne pourraient pas être acheminées autrement. Cela permet des gestionnaires d'erreurs ou des itinéraires de secours.

Cas d'utilisation courants du middleware Next.js

• Authentification : Validez les informations d'identification de l'utilisateur avant d'accéder aux ressources protégées. Le middleware peut vérifier les jetons de session, redirigeant les utilisateurs non authentifiés vers la connexion. Le greffier utilise cette approche efficacement.

• Journalisation : Suivez les événements de l'application (actions de l'utilisateur, erreurs) en enregistrant chaque demande sur un serveur central pour analyse et débogage.

• Récupération de données : (Avec limitations) Chargez des données à partir d'API ou de bases de données pour obtenir des informations à jour. Notez les considérations de performances abordées plus tard.

• Routage des requêtes : Personnalisez le routage, redirigeant les requêtes vers des chemins spécifiques ou implémentant des gestionnaires d'erreurs fourre-tout.

• Mise en cache : Améliorez les performances en stockant en mémoire les ressources fréquemment consultées, réduisant ainsi les requêtes. (Exemple de code fourni dans le texte original)

• Limitation du débit : Surveillez les requêtes des utilisateurs ou des adresses IP, en bloquant les requêtes excessives pour protéger les ressources backend.

• Transformations de page : Réécrivez le HTML ou transformez les données en temps réel. Ceci est utile pour réécrire l'URL d'une image ou pour diffuser des éléments de différents domaines.

• Analyses/Reporting : Suivez le comportement des utilisateurs et les performances des applications à des fins d'optimisation. Le middleware peut modifier les cookies pour l'intégration d'analyses tierces.

• Internationalisation : Diffusez du contenu dans plusieurs langues en fonction des paramètres régionaux de l'utilisateur (par exemple, en utilisant l'adresse IP ou les en-têtes HTTP).

Utiliser un middleware dans un projet Next.js

Le

Middleware est implémenté en créant un fichier middleware.ts à la racine du projet. Ce fichier définit une fonction middleware et (éventuellement) un matcher.

La fonction Middleware

La fonction middleware contient la logique middleware. Il prend un request en entrée et renvoie un response.

<code class="language-javascript">import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'

export function middleware(request: NextRequest) {
  // Middleware logic here
  return NextResponse.next()
}</code>

Exemple de redirection de requêtes vers /dashboard sauf si elles commencent par /api :

<code class="language-javascript">export function middleware(request: NextRequest) {
  if (!request.nextUrl.pathname.startsWith('/api')) {
    return NextResponse.redirect(new URL('/dashboard', request.url))
  }
  return NextResponse.next()
}</code>

La fonction doit renvoyer : NextResponse.next(), NextResponse.redirect(), NextResponse.rewrite(), NextResponse.json(), ou un Response/NextResponse personnalisé.

Le Matcheur

Le matcher détermine quelles requêtes sont traitées par le middleware. Il est défini dans l'objet config :

<code class="language-javascript">export const config = {
  matcher: '/hello', // Matches only /hello
}</code>

Vous pouvez utiliser des tableaux pour plusieurs routes ou des expressions régulières pour une correspondance plus complexe :

<code class="language-javascript">import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'

export function middleware(request: NextRequest) {
  // Middleware logic here
  return NextResponse.next()
}</code>

Sans matcher, le middleware s'applique à toutes routes, ce qui peut avoir un impact sur les performances.

Combinaison de plusieurs fonctions middleware

Next.js ne prend en charge qu'un seul fichier middleware. Pour utiliser plusieurs fonctions, créez des fonctions distinctes et appelez-les séquentiellement, en renvoyant une réponse si elle est générée :

<code class="language-javascript">export function middleware(request: NextRequest) {
  if (!request.nextUrl.pathname.startsWith('/api')) {
    return NextResponse.redirect(new URL('/dashboard', request.url))
  }
  return NextResponse.next()
}</code>

Clerk et Middleware Next.js

Clerk simplifie l'authentification en fournissant clerkMiddleware :

<code class="language-javascript">export const config = {
  matcher: '/hello', // Matches only /hello
}</code>

Cela gère l'analyse des cookies et la vérification des utilisateurs. Vous pouvez l'étendre avec une logique personnalisée :

<code class="language-javascript">export const config = {
  matcher: ['/hello', '/world', '/[a-zA-Z]+/'], // Matches multiple routes and regex
}</code>

Limitations du middleware Next.js

• Contraintes d'exécution Edge : Le middleware s'exécute sur Edge Runtime, limitant les API et les bibliothèques disponibles. L'accès au système de fichiers n'est pas autorisé.

• Restriction de taille : Les fonctions du middleware sont limitées à 1 Mo.

• Modules ES uniquement : Seuls les modules ES sont pris en charge.

• Aucune évaluation de chaîne : eval et new Function(evalString) ne sont pas autorisés.

• Considérations relatives aux performances : Un middleware complexe peut avoir un impact négatif sur les performances. L'accès aux bases de données au sein du middleware est généralement déconseillé.

• Accès limité aux requêtes/réponses : Le middleware n'a pas un accès complet aux objets de requête et de réponse.

Conclusion

Ce guide fournit une compréhension complète du middleware Next.js, de ses capacités, de ses limites et de ses meilleures pratiques. N'oubliez pas de donner la priorité à un code efficace pour éviter les goulots d'étranglement en matière de performances.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!