Метаданные
Что если мы захотим изменить метаданные страницы, например HTML-тег <title>
?
Тег <title>
является частью HTML-тега <head>
, поэтому давайте разберёмся, как можно изменить тег <head>
в странице Next.js.
Откройте файл pages/index.js
в вашем редакторе и найдите следующие строки:
<Head>
<title>Create Next App</title>
<link rel="icon" href="/favicon.ico" />
</Head>
Обратите внимание, что используется <Head>
вместо строчного <head>
. <Head>
— это React-компонент, встроенный в Next.js. Он позволяет изменять <head>
страницы.
Вы можете импортировать компонент Head
из модуля next/head
.
Добавление Head
в first-post.js
Мы не добавили <title>
для нашего маршрута /posts/first-post
. Давайте исправим это.
Откройте файл pages/posts/first-post.js
и добавьте импорт Head
из next/head
в начало файла:
import Head from 'next/head';
Затем обновите экспортируемый компонент FirstPost
, включив в него компонент Head
. Пока мы добавим только тег title
:
export default function FirstPost() {
return (
<>
<Head>
<title>First Post</title>
</Head>
<h1>First Post</h1>
<h2>
<Link href="/">← Back to home</Link>
</h2>
</>
);
}
Попробуйте открыть http://localhost:3000/posts/first-post. Теперь во вкладке браузера должно отображаться "First Post". Используя инструменты разработчика браузера, вы увидите, что тег title
добавлен в <head>
.
Чтобы узнать больше о компоненте
Head
, ознакомьтесь с API-справочникомnext/head
.Если вы хотите настроить тег
<html>
, например добавить атрибутlang
, вы можете сделать это, создав файлpages/_document.js
. Подробнее в документации по настройкеDocument
.