Comment le middleware transforme la gestion des requêtes dans le développement Web / Blogs / Perficient

Qu’est-ce qu’un middleware ?

• Le middleware est comme un assistant qui s’exécute avant que votre serveur Web n’ait fini de traiter une requête.
• Il peut modifier la demande ou la réponse, par exemple en changeant les données, en changeant la destination de la demande ou en modifiant l’apparence des choses.
• Le middleware s’exécute avant que le serveur ne recherche le contenu mis en cache ou ne fasse correspondre la requête à un itinéraire spécifique (modèle d’URL).
• Il s’agit donc d’une étape de prétraitement qui peut façonner la façon dont les demandes et les réponses sont traitées.

Fonctions clés du middleware

• Modifier les demandes : Modifiez ou ajoutez des données à la demande avant qu’elle n’atteigne le serveur.
• Modifier les réponses : Ajustez ou ajoutez des données à la réponse avant qu’elle ne soit renvoyée à l’utilisateur.
• Redirection ou réécriture : Contrôlez où aboutit l’utilisateur ou comment la demande est traitée sans modifier l’URL dans le navigateur.

Section du congrès

• La convention signifie qu’il existe une manière standard de faire les choses.
• Pour définir un fichier nommé ‘middleware.js’ ou ‘middleware.ts’.
• Placez ce fichier à la racine de votre projet.

//Path: src/middleware.ts
             or
//Path: src/middleware.js

Regardons un exemple :

//Path: src/middleware.ts
import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'
 
export function middleware(request: NextRequest) {
  return NextResponse.redirect(new URL('/', request.url))
}
 
export const config = {
  matcher: '/about/:path*',
}

Ce middleware Next.js redirige toute requête vers des chemins commençant par /à propos à la racine du site (‘/’). Le paramètre Matcher garantit qu’il s’applique à /à propos et tous ses sous-chemins, comme /à propos/l’équipeenvoyant efficacement les utilisateurs de n’importe quel /à propos page vers la page d’accueil.

Vous pouvez également :

• Ajoutez facilement des en-têtes personnalisés.
• Envoyez une réponse JSON en fonction de conditions spécifiques, par exemple en indiquant un problème de base de données si la base de données est en panne.

Pour accéder à l’objet de requête, exportez un ‘configuration’ objet avec un ‘matcheur’ clé pour spécifier les chemins que le middleware devrait gérer.

Déclarations conditionnelles

Utilisez des conditions if-else pour implémenter une logique complexe. Par exemple, redirigez ou réécrivez en fonction de différents modèles d’URL ou attributs de demande.

• Une autre approche consiste à utiliser des instructions conditionnelles avec des conditions if-else.
• Au lieu de spécifier des chemins à faire correspondre, vous pouvez utiliser ces conditions pour implémenter une logique plus complexe.
• Par exemple, si un chemin commence par /about (http://localhost:3000/about), vous pouvez le réécrire sur la page « / » ( http://localhost:3000).

Redirections et réécritures

En middleware, il est essentiel de comprendre la différence entre les redirections et les réécritures :

Réorienter: Les redirections renvoient le navigateur de l’utilisateur vers une URL différente. Le navigateur met à jour la barre d’adresse pour afficher la nouvelle URL et l’utilisateur voit le contenu de cette nouvelle URL.

Réécritures : Les réécritures diffusent le contenu à partir d’une URL différente tout en conservant l’URL d’origine dans la barre d’adresse. La barre d’adresse du navigateur ne change pas, mais le contenu affiché provient de l’URL réécrite.

L’API NextResponse vous permet de :

• Redirigez la demande entrante vers une autre URL.
• Réécrivez la réponse en diffusant le contenu à partir d’une URL différente tout en conservant l’URL d’origine dans la barre d’adresse.

Comprenons cela avec un exemple :

Exemple de redirection :

//Path: src/middleware.ts
import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'
 
export function middleware(request: NextRequest) {
  if (request.nextUrl.pathname.startsWith('/about')) {
    return NextResponse.redirect(new URL('/', request.url))
  }
 
  if (request.nextUrl.pathname.startsWith('/login')) {
    return NextResponse.rewrite(new URL('/', request.url))
  }
}

• Si vous utilisez la fonction de redirection pour la page /about et que vous êtes sur l’URL http://localhost:3000/about, l’actualisation de la page vous redirigera vers la page /.
• La barre d’adresse sera mise à jour vers http://localhost:3000.
• Par conséquent, vous verrez le contenu de la page / à l’adresse http://localhost:3000.

Sortir:

Exemple de réécriture :

//Path: src/middleware.ts
import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'
 
export function middleware(request: NextRequest) {
  if (request.nextUrl.pathname.startsWith('/about')) {
    return NextResponse.rewrite(new URL('/', request.url))
  }
 
  if (request.nextUrl.pathname.startsWith('/login')) {
    return NextResponse.rewrite(new URL('/', request.url))
  }
}

• Si vous utilisez la fonction de réécriture pour gérer les requêtes vers /about, mais qu’elle affiche les données de la page / tout en conservant l’URL comme http://localhost:3000/about, le contenu du middleware provient de /, mais l’URL reste /about.
• Le même comportement se produira pour la page de connexion si une logique similaire est appliquée.

Sortir:

Configuration du correspondant

La configuration du matcher vous permet de spécifier à quels chemins le middleware doit s’appliquer.

Dans middleware.js :

Pour faire correspondre un seul chemin, vous pouvez le configurer comme ceci :

//Path: src/middleware.ts
export const config = {
  matcher: '/about/:path*',
}

Pour faire correspondre plusieurs chemins, vous pouvez utiliser une syntaxe de tableau :

//Path: src/middleware.ts
export const config = {
  matcher: ['/about/:path*', '/login/:path*'],
}

Cette configuration permet de filtrer, qui demande le processus middleware en fonction des chemins spécifiés.

Conclusion

Le middleware personnalise la façon dont votre application Web gère les demandes et les réponses. Il vous permet de modifier, rediriger ou gérer les requêtes avant qu’elles n’atteignent votre serveur. Configurez-le dans « middleware.js » ou « middleware.ts » pour améliorer le comportement de votre application avec une logique et un routage personnalisés.