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>)
}

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.

Do poczytania

Błąd w pytaniu

Next.js · Middle · pytanie 59

Sprawdź się

Rozwiąż test Next.js · Middle: pytania i odpowiedzi są tasowane, a na końcu czeka przegląd błędów.

Rozwiąż ten test