Creating Share Images for Next.js

Generate dynamic OpenGraph (1200x630) and Twitter (1200x600) images using next/og ImageResponse.

Choosing an Approach

• File-based route (app/opengraph-image.tsx): Best for static pages with known titles at build time. Export runtime, alt, size, contentType, and a default Image function.
• API route (app/api/og/route.tsx): Best for dynamic content (blog posts, CMS). Accept slug and/or title as query params. Reference in metadata via generateMetadata().

Use export const runtime = "edge" for both approaches.

File Naming Convention