Next.js · Middle · Pytanie 59 z 75
Jak wygenerować w kodzie dynamiczny obraz Open Graph (np. z tytułem posta)?
// 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>)
}- ✓Poprawna odpowiedź: Zwrócić
ImageResponseznext/ogw plikuopengraph-image.tsx - 2Wyrenderować stronę w headless przeglądarce i zrobić zrzut ekranu
- 3Użyć
next/imagez propemog
Wyjaśnienie
ImageResponse zamienia JSX i podzbiór CSS (flexbox) w PNG. Domyślnie obraz jest generowany podczas budowania i buforowany, chyba że używa API czasu żądania.