home / skills / andrelandgraf / fullstackrecipes / og-image-generation

og-image-generation skill

safe

This skill generates dynamic social preview images for Next.js apps using file conventions and next/og, with server-side rendering and build-time caching.

npx playbooks add skill andrelandgraf/fullstackrecipes --skill og-image-generation

Review the files below or copy the command above to add this skill to your agents.

Files (1)

SKILL.md

465 B

---
name: og-image-generation
description: Generate dynamic social preview images using Next.js file conventions and the next/og library. Server-rendered JSX images cached at build time.
---

# OG Image Generation

Generate dynamic social preview images using Next.js file conventions and the next/og library. Server-rendered JSX images cached at build time.

```bash
curl -H "Accept: text/markdown" https://fullstackrecipes.com/api/recipes/og-image-generation
```

Overview

This skill generates dynamic social preview (OG) images for Next.js apps using Next.js file conventions and the next/og library. It produces server-rendered JSX images that can be cached at build time for fast, consistent social previews. The approach is production-ready and integrates with existing Next.js routes and build pipelines.

How this skill works

You define image JSX components that follow Next.js routing and file conventions, then use the next/og library to render those components server-side into image bytes. Images are generated on the server and can be cached at build time so the same URL returns a pre-rendered image for social cards and link previews. The skill focuses on repeatable patterns and recipes to integrate this into a full-stack app reliably.

When to use it

When you need consistent, brand-aligned social preview images for links and content pages.
When you want server-side rendered images that avoid client-side rendering delays.
When you need images cached at build time for better performance and deterministic outputs.
When using Next.js and you prefer file-convention routing for OG endpoints.
When you want to generate dynamic images (title, author, date) per page or post.

Best practices

Keep image JSX components simple and deterministic to allow effective build-time caching.
Use fonts and assets that are accessible to the server render environment to avoid missing resources.
Render only essential content (title, logo, author) to keep image size and render time small.
Version or fingerprint static assets so cached images invalidate correctly on updates.
Test generated images across social platforms to confirm correct metadata and sizing.

Example use cases

Generating per-post social preview images that include post title, author, and category.
Creating marketing campaign images that are produced from a template and stamped with campaign metadata.
Auto-generating event or webinar preview images with date, speaker, and logo for calendar links.
Producing user profile preview cards for social sharing with avatars and user handle.

FAQ

Can images be generated at build time only?

Yes. If your image components are deterministic and use build-available assets, they can be rendered and cached at build time so the same URL returns the pre-rendered image.

Do I need client-side code to render OG images?

No. The next/og approach renders images server-side using JSX, so no client-side rendering is required for the image itself.