og-images
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. Exportruntime,alt,size,contentType, and a defaultImagefunction. - API route (
app/api/og/route.tsx): Best for dynamic content (blog posts, CMS). Acceptslugand/ortitleas query params. Reference in metadata viagenerateMetadata().
Use export const runtime = "edge" for both approaches.
File Naming Convention
| File | Purpose | Dimensions |
|---|---|---|
opengraph-image.tsx |
Facebook, LinkedIn, iMessage | 1200x630 |
twitter-image.tsx |
Twitter/X cards | 1200x600 |
app/api/og/route.tsx |
Dynamic API route | 1200x630 |
More from richtabor/agent-skills
humanize
Reviews and edits copy to remove AI-generated patterns and make text sound natural. Use when editing drafts, reviewing copy, "humanize this", "make it less AI", "sounds too AI", "remove AI patterns", "edit my copy", "this sounds robotic", or when text feels machine-generated.
108technical-writing
Writes technical blog posts about features being built. Triggers when user asks to write about development progress, implementations, or project updates.
43create-prd
Plan features interactively. Asks clarifying questions, then generates a detailed PRD document.
36motion-design
Provides motion design guidance for UI components. Triggers on animation requests ("animate this", "add transition", "motion for"), refinement requests ("clean up this animation", "clean up the motion", "this feels too fast/slow", "make this feel more alive/natural"), and questions about easing, timing, or micro-interactions.
28review-agents-md
Creates minimal, effective AGENTS.md files using progressive disclosure. Triggers on "create agents.md", "refactor agents.md", "review my agents.md", "claude.md", or questions about agent configuration files. Also triggers proactively when a project is missing AGENTS.md.
27ralph-json-start-loop
Runs the Ralph autonomous loop. Executes stories from prds/*.json using git worktrees.
26