Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «Що таке dynamic metadata?». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)**Dynamic metadata** у Next.js - це метадані, які **обчислюються під час запиту** і можуть залежати від маршруту, даних, користувача або зовнішніх джерел. **Ключове:** це SEO-дані, які підлаштовуються під конкретну сторінку і її контекст.Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)Зображення**Dynamic metadata** у Next.js - це метадані, які **обчислюються під час запиту** і можуть залежати від маршруту, даних, користувача або зовнішніх джерел. Простіше кажучи: > dynamic metadata - це SEO-дані, які підлаштовуються під конкретну сторінку і її контекст. --- ## Як задається dynamic metadata Dynamic metadata описується через функцію `generateMetadata`: ```ts 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 Приклади: - блог - картки товарів - профілі користувачів - категорії з різним контентом --- ## Приклад із завантаженням даних ```ts 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Для рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.