<Head> | Next.js Русский

Примеры

Мы предоставляем встроенный компонент для добавления элементов в head страницы:

import Head from 'next/head'

function IndexPage() {
  return (
    <div>
      <Head>
        <title>Мой заголовок страницы</title>
      </Head>
      <p>Hello world!</p>
    </div>
  )
}

export default IndexPage

Чтобы избежать дублирования тегов в head, вы можете использовать свойство key, которое гарантирует, что тег будет отрендерен только один раз, как в следующем примере:

import Head from 'next/head'

function IndexPage() {
  return (
    <div>
      <Head>
        <title>Мой заголовок страницы</title>
        <meta property="og:title" content="Мой заголовок страницы" key="title" />
      </Head>
      <Head>
        <meta property="og:title" content="Мой новый заголовок" key="title" />
      </Head>
      <p>Hello world!</p>
    </div>
  )
}

export default IndexPage

В этом случае будет отрендерен только второй <meta property="og:title" />. Теги meta с дублирующимися атрибутами key обрабатываются автоматически.

Содержимое head очищается при размонтировании компонента, поэтому убедитесь, что каждая страница полностью определяет, что ей нужно в head, не делая предположений о том, что добавили другие страницы.

Элементы title, meta или любые другие (например, script) должны быть непосредственными дочерними элементами компонента Head или обёрнуты максимум в один уровень <React.Fragment> или массивов — в противном случае теги не будут корректно обработаны при клиентской навигации.

Мы рекомендуем использовать next/script в вашем компоненте вместо ручного создания <script> в next/head.