Установка языка документа

Проблема

Веб-страница отображается на французском языке, но сам HTML-документ не помечен как таковой (например, <html lang="en">). Отсутствие указания языка приводит к тому, что программы чтения с экрана пытаются произносить французский текст с использованием английской фонетики. Это также мешает браузерам предлагать автоматический перевод и влияет на индексацию поисковыми системами.

Решение

Считайте параметр lang из URL в корневом компоненте макета. Передайте этот параметр lang в атрибут lang элемента <html>. Это явно указывает браузерам и вспомогательным технологиям язык всего документа.

Шаги

1. Доступ к параметру `lang` в корневом макете

В маршрутизаторе Next.js App файл layout.tsx внутри динамического сегмента (например, [lang]) автоматически получает значение этого сегмента в виде свойства params.

2. Установите атрибут `lang` для элемента `<html>`

Измените ваш файл app/[lang]/layout.tsx, чтобы он принимал свойство params и применял его свойство lang к атрибуту lang тега <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>
  );
}

Это гарантирует, что запрос к /fr/about приведет к тому, что сгенерированная страница начнется с <html lang="fr">. Это простое изменение корректно информирует программы чтения с экрана, поисковые системы и браузеры о том, на каком языке написано содержимое.