Middleware

Aperçu

Ce guide vous expliquera comment ajouter le routage middleware i18n et des chemins localisés à votre application Next.js en utilisant le middleware intégré de gt-next.

Qu'est-ce que le routage middleware i18n ?

Créer de nouvelles routes pour chaque langue présente l'avantage de rendre votre site web plus convivial et d'améliorer le référencement. Le routage i18n vous permet d'associer des URL spécifiques à différentes langues. Par exemple, vous pouvez avoir /en/airplanes pour l'anglais, /zh/airplanes pour le chinois, etc.

Vous pouvez aller encore plus loin avec les chemins localisés. Il s'agit d'une extension du routage i18n qui vous permet de spécifier un chemin alias pour une langue. Par exemple, vous pouvez spécifier /en/airplanes pour l'anglais, /zh/飞机 pour le chinois, etc.

Configurer le routage i18n

Nous allons vous guider à travers deux étapes simples pour ajouter le routage i18n à votre application Next.js :

Étape 1 : Ajouter une route dynamique

Insérez un répertoire dans votre dossier app appelé [locale] (par exemple, app/[locale]). Incluez toutes vos pages et mises en page sous ce répertoire.

Assurez-vous que tous les fichiers spéciaux à l'intérieur de app/ sont imbriqués sous app/[locale].

Étape 2 : Ajouter le fichier middleware

Dans Next.js, créez un fichier appelé middleware.js (ou .ts si vous utilisez TypeScript) à la racine du projet. Si vous utilisez le dossier src/, placez-le plutôt dans src/middleware.js (ou .ts). Ajoutez la fonction createNextMiddleware() dans ce fichier.

import { createNextMiddleware } from 'gt-next/middleware'

export default createNextMiddleware();

export const config = {
  matcher: [
    /*
      * Match all request paths except for the ones starting with:
      * - api (API routes)
      * - _next (internal files)
      * - static files
      */
    "/((?!api|static|.*\\..*|_next).*)",
  ],
}

Configurer des chemins localisés

Vous pouvez spécifier des chemins localisés via l'option pathConfig dans le fichier middleware.

export default createNextMiddleware({
  pathConfig: {
    // You can specify a shared path (optional)
    // This will create "/en/about" and "/zh/about"
    "/about": "/about",

    // Specify localized paths
    // This will create "/en/airplanes" and "/zh/飞机"
    "/airplanes": {
      "zh": "/飞机",
    }

    // Add dynamic path parameters
    // This will create "/en/airports/123" and "/zh/飞机机场/123"
    "/airports/[id]": {
      "zh": "/飞机机场/[id]",
    }
  },
});

Dans cet exemple, nous créons un chemin par défaut pour /en/about et des chemins localisés pour /en/airplanes et /en/airports/[id]. En chinois, ceux-ci seront respectivement aliasés en /zh/about, /zh/飞机 et /zh/飞机机场/[id].

Comportement du routage

Préfixation de la locale par défaut

Par défaut, votre defaultLocale (c'est-à-dire la langue par défaut de votre application) ne sera pas préfixée par un code de langue dans l’URL. Par exemple, si votre locale par défaut est en et que vous avez une page à /about, elle sera accessible à /about en anglais. Cependant, en chinois, elle sera accessible à /zh/about en chinois.

Si vous ne souhaitez pas ce comportement, il peut être désactivé en définissant prefixDefaultLocale à false dans la configuration du middleware.

Détection et redirection de la locale

Le middleware détectera la locale de l'utilisateur en se basant sur (1) la locale dans le chemin de l’URL, (2) la locale du référent, (3) les langues acceptées par le navigateur, et (4) enfin la defaultLocale. L'utilisateur sera alors redirigé en conséquence.

Si à tout moment une version localisée de la page existe, l'utilisateur sera redirigé vers l’URL localisée. Par exemple, /zh/airplanes redirigera toujours vers /zh/飞机.

Cas particulier : chemins localisés sans préfixe de locale

Si vous naviguez vers un chemin localisé sans le préfixe de locale (par exemple, /飞机), le middleware préfixera ce chemin avec la locale qu’il pense être la vôtre.

Par exemple, visiter /飞机 ne redirigera vers /zh/飞机 que si le middleware reconnaît explicitement votre locale comme zh. C’est idéal mais cela ne fonctionne que lorsque le middleware considère que votre locale est zh.

Sinon, votre chemin sera préfixé par votre locale actuelle. Par exemple, visiter /飞机 redirigera vers /en/飞机 si le middleware pense que votre locale est en. Cela entraînera une erreur 404.

Nous recommandons d’utiliser toujours le chemin de votre defaultLocale pour tous les liens dans votre projet. Cela redirigera toujours automatiquement vers le chemin localisé correct.

<Link href="/about">About</Link>
<Link href="/planes">Planes</Link>
<Link href="/airports/123">Airport 123</Link>

Si vous souhaitez explicitement créer un lien vers une autre locale, vous pouvez le faire en utilisant le chemin localisé.

<Link href="/zh/about">About in Chinese</Link>
<Link href="/zh/飞机">Planes in Chinese</Link>
<Link href="/zh/飞机机场/123">Airport 123 in Chinese</Link>

Notes

• Le routage i18n modifie la structure des URL de votre application. Chaque langue possède sa propre URL.
• Le fichier middleware est requis pour gérer la logique de routage.
• Vous pouvez spécifier les locales prises en charge dans la configuration du middleware et dans le fichier de configuration next.

Prochaines étapes

• Consultez la documentation de l’API pour createNextMiddleware().