Метаданные

Что если мы захотим изменить метаданные страницы, например 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.