M

MLOG

Français

Explorez les techniques avancées de modification des requêtes à l'aide du middleware Next.js. Apprenez à gérer le routage complexe, l'authentification, les tests A/B et les stratégies de localisation pour des applications web robustes.

Cas limites du middleware Next.js : Maîtriser les modèles de modification de requête

Le middleware Next.js fournit un mécanisme puissant pour intercepter et modifier les requêtes avant qu'elles n'atteignent les routes de votre application. Cette capacité ouvre un large éventail de possibilités, des simples vérifications d'authentification aux scénarios complexes de tests A/B et aux stratégies d'internationalisation. Cependant, exploiter efficacement le middleware nécessite une compréhension approfondie de ses cas limites et de ses pièges potentiels. Ce guide complet explore les modèles avancés de modification de requêtes, en fournissant des exemples pratiques et des informations exploitables pour vous aider à créer des applications Next.js robustes et performantes.

Comprendre les bases du middleware Next.js

Avant de plonger dans les modèles avancés, rappelons les bases du middleware Next.js. Les fonctions de middleware sont exécutées avant qu'une requête ne soit terminée, ce qui vous permet de :

Les fonctions de middleware résident dans le fichier middleware.js ou middleware.ts de votre répertoire /pages ou /app (selon votre version et votre configuration Next.js). Elles reçoivent un objet NextRequest représentant la requête entrante et peuvent renvoyer un objet NextResponse pour contrôler le comportement ultérieur.

Exemple : Middleware d'authentification de base

Cet exemple montre une simple vérification d'authentification. Si l'utilisateur n'est pas authentifié (par exemple, pas de jeton valide dans un cookie), il est redirigé vers la page de connexion.


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

export function middleware(request: NextRequest) {
  const authToken = request.cookies.get('authToken')

  if (!authToken) {
    return NextResponse.redirect(new URL('/login', request.url))
  }

  return NextResponse.next()
}

export const config = {
  matcher: ['/protected/:path*'],
}

Ce middleware ne s'exécutera que pour les routes qui correspondent à /protected/:path*. Il vérifie la présence d'un cookie authToken. Si le cookie est manquant, l'utilisateur est redirigé vers la page /login. Sinon, la requête est autorisée à se poursuivre normalement à l'aide de NextResponse.next().

Modèles de modification de requête avancés

Explorons maintenant quelques modèles avancés de modification de requêtes qui illustrent le véritable potentiel du middleware Next.js.

1. Tests A/B avec des cookies

Les tests A/B sont une technique cruciale pour optimiser l'expérience utilisateur. Le middleware peut être utilisé pour affecter aléatoirement les utilisateurs à différentes variantes de votre application et suivre leur comportement. Ce modèle repose sur des cookies pour conserver la variante affectée à l'utilisateur.

Exemple : Tests A/B d'une page de destination


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

const VARIANT_A = 'variantA'
const VARIANT_B = 'variantB'

export function middleware(request: NextRequest) {
  let variant = request.cookies.get('variant')?.value

  if (!variant) {
    // Affecter aléatoirement une variante
    variant = Math.random() < 0.5 ? VARIANT_A : VARIANT_B
    const response = NextResponse.next()
    response.cookies.set('variant', variant)
    return response
  }

  if (variant === VARIANT_A) {
    return NextResponse.rewrite(new URL('/variant-a', request.url))
  } else if (variant === VARIANT_B) {
    return NextResponse.rewrite(new URL('/variant-b', request.url))
  }

  return NextResponse.next()
}

export const config = {
  matcher: ['/'],
}

Dans cet exemple, lorsqu'un utilisateur visite le chemin racine (/) pour la première fois, le middleware lui affecte aléatoirement variantA ou variantB. Cette variante est stockée dans un cookie. Les requêtes ultérieures du même utilisateur seront réécrites vers /variant-a ou /variant-b, en fonction de la variante qui lui est affectée. Cela vous permet de servir différentes pages de destination et de suivre celle qui est la plus performante. Assurez-vous d'avoir des routes définies pour /variant-a et /variant-b dans votre application Next.js.

Considérations globales : Lorsque vous effectuez des tests A/B, tenez compte des variations régionales. Un design qui trouve un écho en Amérique du Nord pourrait ne pas être aussi efficace en Asie. Vous pouvez utiliser les données de géolocalisation (obtenues par la recherche d'adresse IP ou les préférences de l'utilisateur) pour adapter le test A/B à des régions spécifiques.

2. Localisation (i18n) avec les réécritures d'URL

L'internationalisation (i18n) est essentielle pour atteindre un public mondial. Le middleware peut être utilisé pour détecter automatiquement la langue préférée de l'utilisateur et le rediriger vers la version localisée appropriée de votre site.

Exemple : Redirection basée sur l'en-tête `Accept-Language`


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

const SUPPORTED_LANGUAGES = ['en', 'fr', 'es', 'de']
const DEFAULT_LANGUAGE = 'en'

function getPreferredLanguage(request: NextRequest): string {
  const acceptLanguage = request.headers.get('accept-language')
  if (!acceptLanguage) {
    return DEFAULT_LANGUAGE
  }

  const languages = acceptLanguage.split(',').map((lang) => lang.split(';')[0].trim())

  for (const lang of languages) {
    if (SUPPORTED_LANGUAGES.includes(lang)) {
      return lang
    }
  }

  return DEFAULT_LANGUAGE
}

export function middleware(request: NextRequest) {
  const pathname = request.nextUrl.pathname

  // Vérifier s'il existe une langue dans le pathname
  if (
    SUPPORTED_LANGUAGES.some(
      (locale) => pathname.startsWith(`/${locale}/`) || pathname === `/${locale}`
    )
  ) {
    return NextResponse.next()
  }

  const preferredLanguage = getPreferredLanguage(request)

  return NextResponse.redirect(
    new URL(`/${preferredLanguage}${pathname}`, request.url)
  )
}

export const config = {
  matcher: [
    '/((?!api|_next/static|_next/image|favicon.ico).*)
  ],
}

Ce middleware extrait l'en-tête Accept-Language de la requête et détermine la langue préférée de l'utilisateur. Si l'URL ne contient pas déjà un préfixe de langue (par exemple, /en/about), le middleware redirige l'utilisateur vers l'URL localisée appropriée (par exemple, /fr/about pour le français). Assurez-vous d'avoir une structure de dossiers appropriée dans votre répertoire `/pages` ou `/app` pour les différentes langues. Par exemple, vous aurez besoin d'un fichier `/pages/en/about.js` et `/pages/fr/about.js`.

Considérations globales : Assurez-vous que votre implémentation i18n gère correctement les langues qui s'écrivent de droite à gauche (par exemple, l'arabe, l'hébreu). En outre, envisagez d'utiliser un réseau de diffusion de contenu (CDN) pour diffuser des ressources localisées à partir de serveurs plus proches de vos utilisateurs, ce qui améliore les performances.

3. Indicateurs de fonctionnalités

Les indicateurs de fonctionnalités vous permettent d'activer ou de désactiver des fonctionnalités dans votre application sans déployer de nouveau code. Ceci est particulièrement utile pour déployer progressivement de nouvelles fonctionnalités ou pour tester des fonctionnalités en production. Le middleware peut être utilisé pour vérifier l'état d'un indicateur de fonctionnalité et modifier la requête en conséquence.

Exemple : Activer une fonctionnalité bêta


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

const BETA_FEATURE_ENABLED = process.env.BETA_FEATURE_ENABLED === 'true'

export function middleware(request: NextRequest) {
  if (BETA_FEATURE_ENABLED && request.nextUrl.pathname.startsWith('/new-feature')) {
    return NextResponse.next()
  }

  // Optionnellement rediriger vers une page "fonctionnalité non disponible"
  return NextResponse.rewrite(new URL('/feature-unavailable', request.url))
}

export const config = {
  matcher: ['/new-feature/:path*'],
}

Ce middleware vérifie la valeur de la variable d'environnement BETA_FEATURE_ENABLED. Si elle est définie sur true et que l'utilisateur essaie d'accéder à une route sous /new-feature, la requête est autorisée à se poursuivre. Sinon, l'utilisateur est redirigé vers une page /feature-unavailable. N'oubliez pas de configurer les variables d'environnement de manière appropriée pour les différents environnements (développement, mise en scène, production).

Considérations globales : Lorsque vous utilisez des indicateurs de fonctionnalités, tenez compte des implications légales de l'activation de fonctionnalités qui pourraient ne pas être conformes aux réglementations en vigueur dans toutes les régions. Par exemple, les fonctionnalités liées à la confidentialité des données peuvent devoir être désactivées dans certains pays.

4. Détection de périphérique et routage adaptatif

Les applications web modernes doivent être réactives et s'adapter à différentes tailles d'écran et aux capacités des appareils. Le middleware peut être utilisé pour détecter le type de périphérique de l'utilisateur et le rediriger vers des versions optimisées de votre site.

Exemple : Rediriger les utilisateurs mobiles vers un sous-domaine optimisé pour les mobiles


import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'
import { device } from 'detection'

export function middleware(request: NextRequest) {
  const userAgent = request.headers.get('user-agent')

  if (userAgent) {
    const deviceType = device(userAgent)

    if (deviceType.type === 'phone') {
      const mobileUrl = new URL(request.url)
      mobileUrl.hostname = 'm.example.com'
      return NextResponse.redirect(mobileUrl)
    }
  }

  return NextResponse.next()
}

export const config = {
  matcher: ['/'],
}

Cet exemple utilise la bibliothèque `detection` pour déterminer le type de périphérique de l'utilisateur en fonction de l'en-tête User-Agent. Si l'utilisateur est sur un téléphone mobile, il est redirigé vers le sous-domaine m.example.com (en supposant que vous disposez d'une version de votre site optimisée pour les mobiles hébergée là-bas). N'oubliez pas d'installer le paquet `detection` : `npm install detection`.

Considérations globales : Assurez-vous que votre logique de détection des appareils tient compte des variations régionales en matière d'utilisation des appareils. Par exemple, les téléphones multifonctions sont encore courants dans certains pays en développement. Envisagez d'utiliser une combinaison de détection de User-Agent et de techniques de conception réactive pour une solution plus robuste.

5. Enrichissement des en-têtes de requête

Le middleware peut ajouter des informations aux en-têtes de requête avant qu'ils ne soient traités par les routes de votre application. Ceci est utile pour ajouter des métadonnées personnalisées, telles que les rôles utilisateur, l'état d'authentification ou les ID de requête, qui peuvent être utilisées par la logique de votre application.

Exemple : Ajout d'un ID de requête 


import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'
import { v4 as uuidv4 } from 'uuid'

export function middleware(request: NextRequest) {
  const requestId = uuidv4()
  const response = NextResponse.next()
  response.headers.set('x-request-id', requestId)
  return response
}

export const config = {
  matcher: ['/api/:path*'], // Ne s'applique qu'aux routes API
}

Ce middleware génère un ID de requête unique à l'aide de la bibliothèque uuid et l'ajoute à l'en-tête x-request-id. Cet ID peut ensuite être utilisé à des fins de journalisation, de suivi et de débogage. N'oubliez pas d'installer le paquet `uuid` : `npm install uuid`.

Considérations globales : Lorsque vous ajoutez des en-têtes personnalisés, tenez compte des limites de taille des en-têtes. Le dépassement de ces limites peut entraîner des erreurs inattendues. Assurez-vous également que toute information sensible ajoutée aux en-têtes est correctement protégée, en particulier si votre application se trouve derrière un proxy inverse ou un CDN.

6. Améliorations de la sécurité : Limitation du débit

Le middleware peut agir comme une première ligne de défense contre les attaques malveillantes en mettant en œuvre une limitation du débit. Cela empêche les abus en limitant le nombre de requêtes qu'un client peut effectuer dans une fenêtre temporelle spécifique.

Exemple : Limitation du débit de base à l'aide d'un magasin simple


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

const requestCounts: { [ip: string]: number } = {}
const WINDOW_SIZE_MS = 60000; // 1 minute
const MAX_REQUESTS_PER_WINDOW = 100;

export function middleware(request: NextRequest) {
  const clientIP = request.ip || '127.0.0.1' // Obtenir l'adresse IP du client, par défaut localhost pour les tests locaux

  if (!requestCounts[clientIP]) {
    requestCounts[clientIP] = 0;
  }

  requestCounts[clientIP]++;

  if (requestCounts[clientIP] > MAX_REQUESTS_PER_WINDOW) {
    return new NextResponse(
      JSON.stringify({ message: 'Trop de requêtes' }),
      { status: 429, headers: { 'Content-Type': 'application/json' } }
    );
  }

  // Réinitialiser le compteur après la fenêtre
  setTimeout(() => {
    requestCounts[clientIP]--;
    if (requestCounts[clientIP] <= 0) {
        delete requestCounts[clientIP];
    }
  }, WINDOW_SIZE_MS);

  return NextResponse.next();
}

export const config = {
  matcher: ['/api/:path*'], // Appliquer à toutes les routes API
}

Cet exemple maintient un magasin simple en mémoire (requestCounts) pour suivre le nombre de requêtes de chaque adresse IP. Si un client dépasse le MAX_REQUESTS_PER_WINDOW dans le WINDOW_SIZE_MS, le middleware renvoie une erreur 429 Too Many Requests. Important : Il s'agit d'un exemple simplifié qui ne convient pas aux environnements de production, car il ne s'adapte pas et est vulnérable aux attaques par déni de service. Pour une utilisation en production, envisagez d'utiliser une solution de limitation du débit plus robuste comme Redis ou un service de limitation du débit dédié.

Considérations globales : Les stratégies de limitation du débit doivent être adaptées aux caractéristiques spécifiques de votre application et à la répartition géographique de vos utilisateurs. Envisagez d'utiliser différentes limites de débit pour différentes régions ou segments d'utilisateurs.

Cas limites et pièges potentiels

Bien que le middleware soit un outil puissant, il est essentiel de connaître ses limites et ses pièges potentiels :

Meilleures pratiques pour l'utilisation du middleware Next.js

Pour maximiser les avantages du middleware Next.js et éviter les problèmes potentiels, suivez ces bonnes pratiques :

Conclusion

Le middleware Next.js offre un moyen puissant de modifier les requêtes et de personnaliser le comportement de votre application à la périphérie. En comprenant les modèles avancés de modification de requêtes abordés dans ce guide, vous pouvez créer des applications Next.js robustes, performantes et globalement conscientes. N'oubliez pas de prendre attentivement en compte les cas limites et les pièges potentiels, et de suivre les meilleures pratiques décrites ci-dessus pour vous assurer que vos fonctions de middleware sont fiables et maintenables. Adoptez la puissance du middleware pour créer des expériences utilisateur exceptionnelles et débloquer de nouvelles possibilités pour vos applications web.