Parlons du routage dans Nextjs. Aujourd’hui, nous allons parler de l’un des middlewares les plus puissants. Le middleware dans Nextjs offre un moyen puissant et flexible à la fois d'intercepter les requêtes du serveur et de contrôler le flux des requêtes (redirections, réécriture d'URL) et d'améliorer globalement les fonctionnalités telles que l'authentification, les en-têtes, la persistance des cookies.

Création d'un middleware

Créons l'application Middleware Next.js. Tout d'abord, nous allons créer un nouveau fichier pour le middleware comme middleware.js ou middleware.ts, dans le dossier src. Le middleware dans Next.js doit alors vous permettre de contrôler précisément l'endroit où il sera actif (c'est-à-dire la configuration du matcher personnalisé ou l'utilisation des fonctions isXXX)

Redirection

En utilisant la redirection comme exemple, imaginons un scénario dans lequel la navigation vers /profile devrait rediriger l'utilisateur vers la page d'accueil. Avec l'approche de configuration du matcher personnalisé, nous pouvons y parvenir en important les types nécessaires, en définissant une fonction middleware et en spécifiant la configuration du matcher :

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

export function middleware(request: NextRequest) {
  return NextResponse.redirect(request.url.replace('/profile', '/'));
}

export const config = {
  matcher: '/profile',
};

Dans cet exemple, la fonction middleware vérifie si le chemin de l'URL de la requête est /profile et redirige l'utilisateur vers la page d'accueil.

Pour l'approche des instructions conditionnelles, nous pouvons modifier le code comme suit :

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

export function middleware(request: NextRequest) {
  if (request.nextUrl.pathname === '/profile') {
    return NextResponse.redirect('/hello');
  }
  return NextResponse.next();
}

Dans ce cas, le middleware vérifie le chemin de l'URL de la requête et redirige l'utilisateur vers la route /hello si le chemin est /profile.

Le middleware de Next.js va au-delà de la simple gestion des redirections. Il permet également la réécriture d'URL, ce qui peut être utile pour la prise en charge des URL existantes ou l'optimisation du référencement. En modifiant la redirection pour réécrire dans les exemples précédents, l'URL dans le navigateur restera la même (/profile), mais le contenu de la réponse sera remplacé par le contenu de la route /hello.

Utiliser des cookies

Enfin, explorons l'utilisation des cookies et des en-têtes dans les middlewares. Nous pouvons modifier notre middleware pour gérer les préférences des utilisateurs pour les thèmes et ajouter un en-tête personnalisé pour toutes les réponses :

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

export function middleware(request: NextRequest) {
  const response = NextResponse.next();

  // Handle user theme preference
  const themePreference = request.cookies.get('theme');
  if (!themePreference) {
    response.cookies.set('theme', 'dark');
  }

  // Add a custom header
  response.headers.set('Custom-Header', 'Custom Value');

  return response;
}

Dans cet exemple, nous vérifions d'abord si l'utilisateur a une préférence de thème stockée dans un cookie. Sinon, nous définissons le thème sur « sombre » en ajoutant un cookie. Ensuite, nous ajoutons un en-tête personnalisé à la réponse, ce qui peut être utile pour transmettre des informations supplémentaires ou à des fins de débogage.

Comme vous pouvez le constater, le middleware de Next.js est un outil puissant qui vous permet de contrôler et d'intercepter efficacement le cycle demande-réponse, permettant les redirections, les réécritures d'URL et la manipulation des en-têtes et des cookies. En maîtrisant le middleware, vous pouvez améliorer l'expérience de routage dans vos applications Next.js et créer des expériences utilisateur plus robustes et personnalisables.

"Le middleware de Next.js est une fonctionnalité puissante qui offre un moyen robuste d'intercepter et de contrôler le flux de demandes et de réponses au sein de vos applications." - Documentation Next.js

Conclusion

En résumé, nous avons appris comment définir un middleware dans Next.js, explorer les deux approches principales (configuration du matcher personnalisé et instructions conditionnelles) et appliquer un middleware pour gérer les redirections, les réécritures d'URL et la gestion des cookies et des en-têtes. . Ces connaissances vous aideront à faire passer vos applications Next.js au niveau supérieur en tirant parti de la flexibilité et du contrôle qu'offre le middleware.