<Head>

Примеры

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

import Head from 'next/head'
 
function IndexPage() {
  return (
    <div>
      <Head>
        <title>My page title</title>
      </Head>
      <p>Hello world!</p>
    </div>
  )
}
 
export default IndexPage

Избегайте дублирования тегов

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

import Head from 'next/head'
 
function IndexPage() {
  return (
    <div>
      <Head>
        <title>My page title</title>
        <meta property="og:title" content="My page title" key="title" />
      </Head>
      <Head>
        <meta property="og:title" content="My new title" 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 для скриптов

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

Без тегов html или body

Вы не можете использовать <Head> для установки атрибутов на <html> или <body> тегах. Это приведет к ошибке next-head-count is missing. next/head может обрабатывать только теги внутри тега HTML <head>.