Що таке dynamic metadata?

Next.jsMiddle~1 хв читання

Dynamic metadata у Next.js - це метадані, які обчислюються під час запиту і можуть залежати від маршруту, даних, користувача або зовнішніх джерел.

Простіше кажучи:

dynamic metadata - це SEO-дані, які підлаштовуються під конкретну сторінку і її контекст.

Як задається dynamic metadata

Dynamic metadata описується через функцію generateMetadata:

export async function generateMetadata({ params }) {
  return {
    title: `Пост: ${params.slug}`,
    description: 'Опис статті'
  }
}

Next.js викликає цю функцію на сервері перед рендером сторінки або layout'а.

Звідки беруться дані

У generateMetadata можна використовувати:

params (динамічні сегменти маршруту)
searchParams
fetch до API або бази даних
службову інформацію запиту

Це дозволяє формувати метадані на основі реального контенту.

Де працює dynamic metadata

Dynamic metadata можна використовувати в:

page.tsx
layout.tsx
вкладених layout'ах
route groups

Воно, як і layout'и, успадковується і перевизначається.

Коли потрібен dynamic metadata

Dynamic metadata потрібен, коли:

URL містить параметри (/blog/[slug])
у кожної сторінки унікальний контент
SEO залежить від даних
використовуються CMS або API
потрібні різні зображення Open Graph

Приклади:

блог
картки товарів
профілі користувачів
категорії з різним контентом

Приклад із завантаженням даних

export async function generateMetadata({ params }) {
  const post = await fetchPost(params.slug)

  return {
    title: post.title,
    description: post.excerpt,
    openGraph: {
      images: [post.cover]
    }
  }
}

Метадані формуються на основі реальних даних поста.

Вплив на продуктивність

Dynamic metadata:

виконується на сервері
може робити запити
додає невелику вартість до рендера

Але:

кешується так само, як fetch
коректно працює з ISR і SSR
дає точне SEO

Відмінність від static metadata

Static metadata	Dynamic metadata
Об'єкт `metadata`	Функція `generateMetadata`
Фіксовані дані	Обчислювані дані
Швидше	Трохи важче
Без логіки	Можна писати код
Для статичних сторінок	Для динамічних маршрутів

Підсумок

Dynamic metadata - це:

серверні метадані з логікою
прив'язка SEO до даних
підтримка динамічних URL
коректна робота з App Router

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.