Next.js: заполните тег заголовка настраиваемыми тегами

Как настроитьheadтег вашего приложения Next.js

Из любого компонента страницы Next.js вы можете добавить информацию в заголовок страницы.

Это удобно, когда:

  • вы хотите изменить заголовок страницы
  • вы хотите изменить метатег

Как это сделать?

Внутри каждого компонента вы можете импортироватьHeadкомпонент изnext/headи включите его в вывод JSX вашего компонента:

import Head from 'next/head'

const House = props => ( <div> <Head> <title>The page title</title> </Head> {/* the rest of the JSX */} </div> )

export default House

Вы можете добавить любой HTML-тег, который хотите отображать в<head>раздел страницы.

При монтировании компонента Next.js будет следить за тем, чтобы теги внутриHeadдобавляются в заголовок страницы. То же самое при размонтировании компонента Next.js позаботится об удалении этих тегов.

Скачать мою бесплатнуюСправочник Next.js


Больше следующих руководств: