Как установить язык документа в 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.