Open Graph images are the first thing most people see when a link to your app gets shared - on Slack, Twitter, LinkedIn, iMessage, anywhere a URL gets unfurled into a preview card. A static OG image works fine for a marketing homepage. It falls apart for anything dynamic: blog posts, product pages, user profiles, dashboards, or any route where the content changes per-request. For those, you need OG images generated programmatically, per route, and that generation needs to be fast enough not to introduce noticeable latency.
There are three common production patterns for this in the Next.js and Vercel ecosystem, and they have meaningfully different trade-offs. This post walks through all three.
Pattern 1: Edge Runtime Generation with @vercel/og
The most common approach for new Next.js projects is generating OG images directly at the edge using @vercel/og, which wraps Satori - a library that converts JSX and CSS into SVG, then rasterizes to PNG.
// app/api/og/route.tsx
