og-share-images
Made by JeffNext.js OG/Twitter share images with next/og ImageResponse and Satori. Use when building OG images, Twitter cards, social previews, or share images.
Works With
Quality and Utility come from canonical skill metadata. Community ratings appear separately as stars when subscriber reviews exist.
Subscribe to download
Public previews are available, but downloads, CLI sync, and premium content require an active subscription.
Sign In to Subscribe- Full skill content with deterministic versioning
- CLI sync + local search index
- Access to Jeffrey’s premium library
Save to your account
Saved skills live in your cloud list. Run jsm sync on each machine to pull them locally.
What's New with this Skill
1Updates, enhancements, and release notes for this skill.
New: OG Share Images for Next.js, dynamic social cards with next/og that render correctly
Generate OpenGraph (1200x630) and Twitter (1200x600) images with next/og ImageResponse by dropping opengraph-image.tsx and twitter-image.tsx into a route directory. Satori, the renderer behind next/og, needs display: "flex" on every element and inline styles only; the skill's rules and common-issues table cover the failures that leave text or layout missing.
- Place opengraph-image.tsx (1200x630, for Facebook, LinkedIn, iMessage) and twitter-image.tsx (1200x600) in the route directory; app/about/opengraph-image.tsx serves /about
- Satori rules: display: "flex" on every element, inline styles only, all text wrapped in styled elements, gap only on flex containers, filter only on the SVG root
- Design patterns with copy-paste code: gradient backgrounds, glowing radial orbs for depth, gradient text, SVG icons with gradients, badges, and a bottom gradient accent bar
- Common-issues table: text not rendering or layout broken (add display: "flex"), wrong colors (use hex, not CSS variables), invisible gradient text (needs backgroundClip: "text" and color: "transparent")
- Verify with bun run build: the image routes should show as dynamic (ƒ) edge functions. references/patterns.md adds flywheel diagrams, code-window icons, and network graphics