NextJS добавляет атрибут lang к HTML-тегу

При работе над доступностью часто можно столкнуться с проблемой отсутствия атрибута lang у HTML-тега.

Атрибут lang сообщает пользователю, на каком языке написана страница.

Примерами допустимых атрибутов lang являются:

<!-- French content -->
<html lang="fr"></html>
Войти в полноэкранный режим Выйти из полноэкранного режима

Примечание: Найти коды всех языков можно здесь.

Мы также можем расширить этот пример использования, чтобы определить конкретные версии языка, например, британский английский.

<html lang="en-gb"></html>
Ввести полноэкранный режим Выйти из полноэкранного режима

Добавление тега lang в Next.js

На любом обычном HTML-сайте мы бы добавили этот тег к HTML-элементу. Однако в случае с Next.js у нас нет прямого доступа к нему.

Поэтому для добавления этого тега нам нужно использовать файл next.config.js.

module.exports = {
  i18n: {
    locales: ['en'],
    defaultLocale: 'en',
  },
};
Вход в полноэкранный режим Выход из полноэкранного режима

Если ваш сайт поддерживает несколько языков, вы можете даже поместить различные значения в массив locales.

Затем локали по умолчанию используются для установки текущей локали.

Вы даже можете использовать этот конфиг для установки пользовательских доменов, но об этом мы поговорим отдельно.

Альтернативный метод

Существует альтернативный способ добавления пользовательского HTML-тега, если вы хотите переопределить несколько свойств HTML.

Внутри каталога pages вы можете добавить файл _document.js.

Эта страница будет переопределять документ Next.js по умолчанию.
Внутри него добавьте следующую структуру, и все готово.

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

export default function Document() {
  return (
    <Html lang='en'>
      <Head />
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  );
}
Вход в полноэкранный режим Выход из полноэкранного режима

Вот и все, два разных способа добавления тега lang в Next.js.
Я предпочитаю использовать способ config, так как он немного чище и безопасен для будущего.

Спасибо, что прочитали, и давайте общаться!

Спасибо, что читаете мой блог. Не стесняйтесь подписаться на мою рассылку по электронной почте и подключайтесь к Facebook или Twitter.

Оцените статью
Procodings.ru
Добавить комментарий