Next.js · Middle · Question 59 of 75

How do you generate a dynamic Open Graph image (e.g. with the post title) in code?

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

• ✓Correct answer: Return ImageResponse from next/og in an opengraph-image.tsx file
• 2Render the page in a headless browser and take a screenshot
• 3Use next/image with og prop