Configuración del idioma del documento

Problema

Una página web se muestra en francés, pero el documento HTML en sí no está marcado como tal (por ejemplo, <html lang="en">). Esta falta de declaración del idioma hace que los lectores de pantalla intenten pronunciar el contenido en francés usando la fonética del inglés. También impide que los navegadores ofrezcan traducción automática y afecta la indexación en motores de búsqueda.

Solución

Lee el parámetro lang de la URL en el componente de layout raíz. Pasa este parámetro lang al atributo lang del elemento <html>. Esto declara explícitamente el idioma de todo el documento a los navegadores y tecnologías de asistencia.

Pasos

1. Accede al parámetro `lang` en el layout raíz

En el App Router de Next.js, el archivo layout.tsx dentro de un segmento dinámico (como [lang]) recibe automáticamente el valor de ese segmento como una prop params.

2. Establece el atributo `lang` en el elemento `<html>`

Modifica tu archivo app/[lang]/layout.tsx para aceptar la prop params y aplica su propiedad lang al atributo lang de la etiqueta <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>
  );
}

Esto garantiza que una solicitud a /fr/about resulte en que la página renderizada comience con <html lang="fr">. Este simple cambio informa correctamente a los lectores de pantalla, motores de búsqueda y navegadores en qué idioma está escrito el contenido.