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зnext/ogу файліopengraph-image.tsx - 2Відрендерити сторінку в headless-браузері й зробити скриншот
- 3Використати
next/imageз пропомog
Пояснення
ImageResponse перетворює JSX і підмножину CSS (flexbox) на PNG. За замовчуванням картинка генерується під час збирання й кешується, якщо не використовує API часу запиту.