Comment définir la langue du document dans Next.js (Pages Router) v16

Déclarer la langue de la page pour les navigateurs et les lecteurs d'écran

Problème

Les pages web doivent déclarer leur langue principale aux navigateurs, moteurs de recherche et technologies d'assistance. Sans déclaration explicite de la langue, ces outils doivent deviner la langue du contenu. Les lecteurs d'écran utilisent par défaut la langue du système de l'utilisateur, ce qui entraîne une prononciation incorrecte lorsque la langue du contenu diffère. Les navigateurs ne peuvent pas proposer de fonctionnalités de traduction en toute confiance car ils manquent d'informations sur la langue source. Les moteurs de recherche ont du mal à indexer les pages pour le bon public linguistique, réduisant ainsi la découvrabilité pour les utilisateurs effectuant des recherches dans cette langue.

Solution

Définissez l'attribut lang sur l'élément racine <html> pour déclarer la langue principale de la page. Dans Next.js Pages Router, cela se fait en créant un composant Document personnalisé qui enveloppe la structure HTML de votre application. L'attribut lang accepte un code de langue standard qui indique aux navigateurs, technologies d'assistance et moteurs de recherche quelle langue utilise le contenu, permettant une prononciation correcte, des propositions de traduction appropriées et une indexation précise.

Étapes

1. Créer un fichier document personnalisé

Créez un fichier nommé _document.js (ou _document.tsx pour TypeScript) dans votre répertoire pages. Ce fichier vous permet de personnaliser la structure du document HTML qui enveloppe chaque page de votre application.

import { Html, Head, Main, NextScript } from "next/document";

export default function Document() {
  return (
    <Html lang="en">
      <Head />
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  );
}

Le composant Html de next/document accepte une prop lang qui définit l'attribut de langue sur l'élément HTML racine. Remplacez "en" par le code de langue de votre contenu.

2. Utiliser le code de langue approprié

Les codes de langue suivent le format standard UTS Locale Identifiers : language-region-script, où la région et le script sont facultatifs. Dans la plupart des cas, utilisez le code de langue ISO 639-1 à deux lettres.

import { Html, Head, Main, NextScript } from "next/document";

export default function Document() {
  return (
    <Html lang="fr">
      <Head />
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  );
}

Les exemples courants incluent "en" pour l'anglais, "es" pour l'espagnol, "fr" pour le français, "de" pour l'allemand et "ja" pour le japonais. Vous pouvez inclure des variantes régionales comme "en-US" ou "en-GB" si nécessaire.

3. Définir la langue dynamiquement en fonction de la locale

Si votre application prend en charge plusieurs locales via le routage i18n de Next.js, accédez à la locale actuelle depuis le contexte du routeur pour définir la langue dynamiquement.

import Document, {
  Html,
  Head,
  Main,
  NextScript,
  DocumentContext,
  DocumentInitialProps,
} from "next/document";

export default class MyDocument extends Document {
  static async getInitialProps(
    ctx: DocumentContext,
  ): Promise<DocumentInitialProps> {
    const initialProps = await Document.getInitialProps(ctx);
    return initialProps;
  }

  render() {
    return (
      <Html lang={this.props.locale}>
        <Head />
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

Lors de l'utilisation de la configuration i18n intégrée de Next.js, le framework fournit automatiquement la locale et met à jour l'attribut lang. La prop locale est disponible sur le composant Document lorsque i18n est configuré dans next.config.js.