Как задать язык документа в Next.js (Pages Router) v16

Укажите язык страницы для браузеров и экранных читалок

Проблема

Веб-страницы должны явно указывать основной язык для браузеров, поисковых систем и вспомогательных технологий. Без явного указания языка этим инструментам приходится угадывать язык содержимого. Экранные читалки по умолчанию используют язык системы пользователя, из-за чего текст может озвучиваться с неправильным произношением, если язык контента отличается. Браузеры не могут корректно предлагать перевод, так как не знают исходный язык. Поисковым системам сложно индексировать страницы для нужной языковой аудитории, что снижает видимость для пользователей, ищущих на этом языке.

Решение

Установите атрибут lang на корневой элемент <html>, чтобы объявить основной язык страницы. В Next.js Pages Router это делается через создание собственного компонента Document, который оборачивает HTML-структуру вашего приложения. Атрибут lang принимает стандартный языковой код, который сообщает браузерам, вспомогательным технологиям и поисковым системам, на каком языке написан контент. Это обеспечивает правильное произношение, корректные предложения перевода и точную индексацию.

Шаги

1. Создайте файл кастомного документа

Создайте файл с именем _document.js (или _document.tsx для TypeScript) в директории pages. Этот файл позволяет настраивать HTML-документ, который оборачивает каждую страницу вашего приложения.

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

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

Компонент Html из next/document принимает пропс lang, который задаёт язык на корневом HTML-элементе. Замените "en" на код языка вашего контента.

2. Используйте подходящий языковой код

Коды языков соответствуют стандартному формату идентификаторов локалей UTS: language-region-script, где регион и скрипт являются необязательными. В большинстве случаев используйте двухбуквенный языковой код ISO 639-1.

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

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

Распространённые примеры: "en" для английского, "es" для испанского, "fr" для французского, "de" для немецкого и "ja" для японского. При необходимости можно указать региональные варианты, например "en-US" или "en-GB".

3. Динамическая установка языка на основе локали

Если ваше приложение поддерживает несколько локалей через i18n-маршрутизацию Next.js, получите текущую локаль из контекста роутера, чтобы динамически задать язык.

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>
    );
  }
}

При использовании встроенной i18n-конфигурации Next.js фреймворк автоматически предоставляет локаль и обновляет атрибут lang. Свойство locale доступно в компоненте Document, если i18n настроен в next.config.js.