Компонент <Head>
Примеры
Мы предоставляем встроенный компонент для добавления элементов в 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 для скриптов
Мы рекомендуем использовать next/script в вашем компоненте вместо ручного создания <script> в next/head.
Не используйте теги html или body
Вы не можете использовать <Head> для установки атрибутов на теги <html> или <body>. Это приведёт к ошибке next-head-count is missing. next/head может обрабатывать только теги внутри HTML-тега <head>.