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

Проблема

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

Решение

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

Шаги

1. Получите параметр `lang` в корневом layout

В Next.js App Router файл 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">. Такое простое изменение корректно информирует скринридеры, поисковые системы и браузеры о языке содержимого.