Comment détecter les préférences linguistiques de l'utilisateur dans Next.js (Pages Router) v16

Problème

Chaque navigateur envoie un en-tête Accept-Language avec chaque requête HTTP, indiquant les langues préférées de l'utilisateur par ordre de priorité. La plupart des applications ignorent ce signal précieux et servent une langue par défaut à tous les visiteurs, forçant les utilisateurs à rechercher manuellement un sélecteur de langue même lorsque l'application connaît déjà leurs préférences. Cela crée une friction inutile lors de la première visite et peut conduire les utilisateurs à abandonner le site avant de trouver du contenu dans leur langue.

Lorsque les utilisateurs arrivent sur le chemin racine d'une application, il existe une opportunité d'examiner leurs préférences linguistiques et de les diriger immédiatement vers du contenu dans une langue qu'ils comprennent. Sans cette détection, les utilisateurs internationaux font face à une expérience anglophone par défaut, quels que soient les paramètres de leur navigateur, manquant l'occasion de fournir une première impression accueillante et localisée.

Solution

Créez une page racine qui exécute une logique côté serveur à chaque requête vers le chemin racine. Lisez l'en-tête HTTP Accept-Language de la requête entrante et analysez-le pour extraire la langue la plus préférée de l'utilisateur. Comparez cette langue avec la liste des langues prises en charge par votre application. Si une correspondance est trouvée, redirigez l'utilisateur vers le chemin racine de cette langue. Si aucune langue prise en charge ne correspond, redirigez vers un chemin de langue par défaut.

Cette approche exploite la fonction getServerSideProps de Next.js, qui s'exécute sur le serveur pour chaque requête et peut renvoyer une réponse de redirection. En gérant la détection au niveau du chemin racine, l'application fournit une valeur par défaut intelligente tout en permettant aux utilisateurs de changer manuellement de langue ultérieurement si nécessaire.

Étapes

1. Installer une bibliothèque pour analyser l'en-tête Accept-Language

L'en-tête Accept-Language contient une liste de codes de langue séparés par des virgules avec des valeurs de qualité optionnelles qui doivent être analysées. Installez une bibliothèque d'analyse pour gérer ce format.

npm install accept-language-parser

Cette bibliothèque extrait les codes de langue et les scores de qualité de la chaîne d'en-tête et les renvoie par ordre de priorité.

2. Créer une page racine avec une logique de redirection côté serveur

Créez un fichier pages/index.tsx qui sera automatiquement routé vers le répertoire racine. Utilisez getServerSideProps pour renvoyer un objet de redirection avec une destination et un indicateur permanent.

import { GetServerSideProps } from "next";
import parser from "accept-language-parser";

const SUPPORTED_LOCALES = ["en", "fr", "es", "de"];
const DEFAULT_LOCALE = "en";

export default function RootPage() {
  return null;
}

export const getServerSideProps: GetServerSideProps = async (context) => {
  const acceptLanguageHeader = context.req.headers["accept-language"];

  let targetLocale = DEFAULT_LOCALE;

  if (acceptLanguageHeader) {
    const languages = parser.parse(acceptLanguageHeader);

    const matchedLanguage = languages.find((lang) =>
      SUPPORTED_LOCALES.includes(lang.code),
    );

    if (matchedLanguage) {
      targetLocale = matchedLanguage.code;
    }
  }

  return {
    redirect: {
      destination: `/${targetLocale}`,
      permanent: false,
    },
  };
};

La fonction getServerSideProps s'exécute à chaque requête, lit l'en-tête Accept-Language et redirige vers le chemin de locale approprié avant le rendu du contenu de la page.

3. Définir vos locales prises en charge

Mettez à jour le tableau SUPPORTED_LOCALES pour qu'il corresponde aux langues prises en charge par votre application. L'analyseur renverra les langues par ordre de qualité, et le code sélectionne la première correspondance.

const SUPPORTED_LOCALES = ["en", "fr", "es", "de", "ja", "zh"];
const DEFAULT_LOCALE = "en";

L'analyseur renvoie les langues triées par qualité de la plus élevée à la plus basse, donc la première langue prise en charge trouvée représente la préférence la plus forte de l'utilisateur que votre application peut satisfaire.

4. Gérer les cas sans en-tête Accept-Language

Certaines requêtes peuvent ne pas inclure d'en-tête Accept-Language. Le code vérifie la présence de l'en-tête et se rabat sur la locale par défaut lorsqu'il est absent.

if (acceptLanguageHeader) {
  const languages = parser.parse(acceptLanguageHeader);

  const matchedLanguage = languages.find((lang) =>
    SUPPORTED_LOCALES.includes(lang.code),
  );

  if (matchedLanguage) {
    targetLocale = matchedLanguage.code;
  }
}

Cela garantit que l'application redirige toujours vers un chemin de locale valide, même lorsque les informations de langue du navigateur ne sont pas disponibles.