Next.js · Middle · Запитання 59 з 75

Як згенерувати динамічну Open Graph-картинку (наприклад, із заголовком поста) у коді?

// app/blog/[slug]/opengraph-image.tsx
import { ImageResponse } from 'next/og'

export default async function Image({ params }) {
  const { slug } = await params
  return new ImageResponse(<div style={{ fontSize: 64 }}>{slug}</div>)
}

Пояснення

ImageResponse перетворює JSX і підмножину CSS (flexbox) на PNG. За замовчуванням картинка генерується під час збирання й кешується, якщо не використовує API часу запиту.

Де почитати

Помилка в запитанні

Next.js · Middle · запитання 59

Перевірте себе

Пройдіть тест Next.js · Middle: запитання й варіанти перемішуються, а наприкінці - розбір помилок.

Пройти цей тест