Как использовать новую систему метаданных в Next.js 13

Содержание

1. Введение
2. Новое метаданные в Next 13
   • 2.1 Удаление файла head в версии 13.3
   • 2.2 Хранение метаданных в layout.js
3. Использование тегов метаданных
   • 3.1 Ключ "title"
   • 3.2 Шаблоны заголовков
   • 3.3 Добавление метаданных без layout
4. Другие ключи метаданных
   • 4.1 Ключ "description"
   • 4.2 Ключ "keywords"
   • 4.3 Ключ "open graph"
   • 4.4 Ключ "robots"
   • 4.5 Ключ "icons"
   • 4.6 Ключ "theme color"
   • 4.7 Ключ "Manifest"
   • 4.8 Ключи для социальных медиа
5. Обновление метаданных в Next 13.2 и выше
   • 5.1 Замена файла head тегом metadata
   • 5.2 Важность обновления метаданных
6. Заключение

📄 Новое метаданные в Next 13

С последними обновлениями Next 13 появились новые изменения в системе метаданных. Если вы недавно создали приложение на Next 13 или более новой версии, то вам следует обратить внимание на эти изменения.

2.1 Удаление файла head в версии 13.3

С версии 13.3 файл head был объявлен устаревшим и удален. Это означает, что он уже не будет использоваться в будущих версиях Next. Раньше файл head использовался для хранения метаданных, но теперь все метаданные хранятся в файле layout.js.

2.2 Хранение метаданных в layout.js

Чтобы использовать новую функцию метаданных в layout.js, необходимо открыть файл layout.js в директории вашего приложения. В этом файле вы найдете экспортную переменную с именем metadata, где и должны храниться все ваши метаданные.

Важной частью метаданных является ключ "title", который определяет имя вашего сайта и отображается в верхней части вкладки браузера. Вы также можете использовать шаблоны заголовков, чтобы управлять заголовками на разных страницах вашего приложения.

3. Использование тегов метаданных

3.1 Ключ "title"

Ключ "title" является одним из наиболее важных ключей в метаданных. Он определяет название вашего сайта и отображается в верхней части вкладки браузера. Например, если вы установите значение "My Next Site" для ключа "title", то название вашего сайта будет изменено на "My Next Site".

3.2 Шаблоны заголовков

Шаблоны заголовков позволяют вам управлять заголовками на разных страницах вашего приложения. Вы можете создать шаблон в файле layout.js и использовать его как значение по умолчанию для заголовков всех будущих страниц. Если вам нужно изменить заголовок на конкретной странице, вы можете это сделать в самой странице.

3.3 Добавление метаданных без layout

Если страница не использует layout, вы все равно можете добавлять метаданные к ней. Однако будет использоваться значение по умолчанию для заголовка, заданное в layout этой страницы.

4. Другие ключи метаданных

В метаданных также доступны другие ключи, которые могут быть полезны для вашего приложения. Некоторые из них включают:

• "description": задает описание страницы, которое отображается в результатах поиска Google.
• "keywords": позволяет указать ключевые слова, которые помогут поисковым системам понять о чем ваш сайт.
• "open graph": позволяет вашей странице стать богатым объектом в социальном графе с помощью определенных значений, таких как заголовок, описание, URL и изображения.
• "robots": позволяет управлять действиями поисковых роботов на вашей странице.
• "icons": позволяет указать различные иконки вашего сайта.
• "theme color": позволяет задать цвет темы для конкретной страницы.
• "Manifest": используется для создания расширений браузера с помощью Web Extension APIs.
• Ключи для социальных медиа, такие как Twitter, позволяют задать информацию, относящуюся к вашей странице, для лучшего отображения в социальных сетях.

5. Обновление метаданных в Next 13.2 и выше

5.1 Замена файла head тегом metadata

С версии Next 13.2 и выше рекомендуется перестать использовать файл head и начать использовать новую экспортную переменную metadata в layout.js. Это важно, чтобы избежать возможных проблем при обновлении вашего приложения на более новые версии Next.

5.2 Важность обновления метаданных

Обновление метаданных в вашем приложении на Next 13.2 и выше является важным шагом для поддержания его работоспособности. Если вы продолжаете использовать файлы head в своем приложении после обновления, это может привести к его неработоспособности.

FAQ

Q: Какие изменения произошли в системе метаданных в Next 13?\ A: В версии 13.3 файл head был удален, и метаданные начали храниться в файле layout.js.

Q: Как я могу использовать шаблоны заголовков на разных страницах моего приложения?\ A: Вы можете создать шаблон в файле layout.js и использовать его как значение по умолчанию для заголовков всех будущих страниц.

Q: Могу ли я добавлять метаданные к страницам без использования layout?\ A: Да, вы все равно можете добавлять метаданные к страницам без использования layout, но будет использоваться значение по умолчанию для заголовка, заданное в layout этой страницы.

Q: Какие другие ключи метаданных доступны в Next 13?\ A: В Next 13 доступны ключи, такие как "description", "keywords", "open graph", "robots", "icons", "theme color", "Manifest" и ключи для социальных медиа.

Q: Что произойдет, если я продолжу использовать файлы head после обновления на Next 13.2 и новее?\ A: Использование файлов head после обновления может привести к неработоспособности вашего приложения. Рекомендуется перейти на новую систему метаданных с использованием экспортной переменной metadata.