Définir la langue du document

Problème

Une page web est affichée en français, mais le document HTML lui-même n'est pas marqué comme tel (par exemple, <html lang="en">). Cette absence de déclaration de langue oblige les lecteurs d'écran à tenter de prononcer le contenu français en utilisant la phonétique anglaise. Cela empêche également les navigateurs de proposer une traduction automatique et impacte l'indexation par les moteurs de recherche.

Solution

Lisez le paramètre lang depuis l'URL dans le composant de mise en page racine. Transmettez ce paramètre lang à l'attribut lang de l'élément <html>. Cela déclare explicitement la langue de l'ensemble du document aux navigateurs et aux technologies d'assistance.

Étapes

1. Accéder au paramètre `lang` dans la mise en page racine

Dans le routeur d'application Next.js, le fichier layout.tsx à l'intérieur d'un segment dynamique (comme [lang]) reçoit automatiquement la valeur de ce segment en tant que prop params.

2. Définir l'attribut `lang` sur l'élément `<html>`

Modifiez votre fichier app/[lang]/layout.tsx pour accepter la prop params et appliquer sa propriété lang à l'attribut lang de la balise <html>.

// app/[lang]/layout.tsx

export default function RootLayout({
  children,
  params,
}: {
  children: React.ReactNode;
  params: { lang: string };
}) {
  return (
    <html lang={params.lang}>
      <body>{children}</body>
    </html>
  );
}

Cela garantit qu'une requête vers /fr/about résulte en une page rendue commençant par <html lang="fr">. Ce simple changement informe correctement les lecteurs d'écran, les moteurs de recherche et les navigateurs de la langue dans laquelle le contenu est rédigé.