Og Image Generation

andrelandgraf/fullstackrecipes

This generates Open Graph preview images for your Next.js app using the next/og library, which lets you write JSX that renders to images at the edge. You'd reach for this when you need those social media cards (Twitter, LinkedIn, Facebook) but don't want to mess with Puppeteer or external image services. The images get cached at build time, so there's no performance hit. It's a solid approach if you're already in the Next.js ecosystem and want dynamic previews without adding another dependency or service to your stack.

skills.sh installs

245

GitHub stars

23

last updated

Aug 21, 2026

curl https://fullstackrecipes.com/recipes/og-image-generation.md

Sponsors

Promote your product hereReach 125k+ visitors monthlyPromote your product hereReach 125k+ visitors monthlyAgent CaffeineSponsoredClose your lid, come back to finished workSnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthlyWaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthlyknobsSponsoredSee your site on any phone, any day, in any language

Recommended

More Frontend Development

1supanova-design-engineuxjoseph/supanova-design-skillSupanova Landing Page Design Engine. Generates premium, conversion-optimized landing pages using pure HTML + Tailwind CSS (CDN). Overrides default LLM biases to245skills.sh installs

2accessibilityyonatangross/orchestkitAccessibility patterns for WCAG 2.2 compliance, keyboard focus management, React Aria component patterns, cognitive inclusion, native HTML-first philosophy, and245skills.sh installs

3atomic-designjwilger/agent-skillsBrad Frost's Atomic Design methodology for UI component hierarchies: atoms (indivisible elements), molecules (small groups of atoms), organisms (complex section244skills.sh installs

4citycraftoil-oil/citycraftCreate a bold, visually striking landing page — unconventional layouts, GSAP scroll animations, SVG elements, clip-path dividers, real depth and layering. Use t244skills.sh installs

5tweaksnexu-io/open-designWrap any HTML artifact with a side panel of live, parameterized controls — accent color, type scale, density, motion, theme — that rewrite CSS custom properties243skills.sh installs

6feature-slicingccheney/robust-skillsProactively apply when creating new features/components/pages or setting up frontend project structure. Triggers on FSD, feature slicing, Feature-Sliced Design,242skills.sh installs