--- name: creating-share-images description: >- Create OpenGraph and Twitter share images for Next.js applications using next/og ImageResponse. Generates dynamic social preview cards with gradients, SVG icons, and proper dimensions. Use when building OG images, Twitter cards, social previews, meta images, or share images for webapps. --- # Creating Share Images for Next.js Generate dynamic OpenGraph (1200x630) and Twitter (1200x600) images using `next/og` ImageResponse. ## Quick Start Create `app/opengraph-image.tsx`: ```tsx import { ImageResponse } from "next/og"; export const runtime = "edge"; export const alt = "Page Title - Site Description"; export const size = { width: 1200, height: 630 }; export const contentType = "image/png"; export default async function Image() { return new ImageResponse( (

Page Title

), { ...size } ); } ``` ## File Naming Convention | File | Purpose | Dimensions | |------|---------|------------| | `opengraph-image.tsx` | Facebook, LinkedIn, iMessage | 1200×630 | | `twitter-image.tsx` | Twitter/X cards | 1200×600 | Place in route directory (e.g., `app/about/opengraph-image.tsx` for `/about`). ## Design Patterns ### Gradient Backgrounds ```tsx background: "linear-gradient(145deg, #0a0a12 0%, #0f1218 35%, #121620 65%, #0a0a12 100%)" ``` ### Glowing Orbs (Depth Effect) ```tsx

``` ### Gradient Text ```tsx

Title

``` ### SVG Icons with Gradients ```tsx ``` ## Critical Rules 1. **Always use `display: "flex"`** on every element (Satori requirement) 2. **No `gap` on containers without `display: "flex"`** 3. **Use inline styles only** - no CSS classes or external stylesheets 4. **All text must be wrapped in elements** with explicit styling 5. **SVG must use `viewBox`** and explicit dimensions 6. **Filter property only on SVG root** - not on child elements ## Color Palette by Section Type | Section | Primary | Secondary | Accent | |---------|---------|-----------|--------| | Homepage | `#3b82f6` blue | `#8b5cf6` purple | `#06b6d4` cyan | | About | `#10b981` emerald | `#14b8a6` teal | `#22c55e` green | | Projects | `#f97316` orange | `#f59e0b` amber | `#f43f5e` rose | | Writing | `#ec4899` pink | `#f472b6` rose | `#6366f1` indigo | | Tools/TLDR | `#22d3ee` cyan | `#a855f7` purple | `#f472b6` pink | ## Badge/Tag Pattern ```tsx

Label

``` ## Bottom Gradient Accent ```tsx

``` ## Testing After creating images, run `bun run build` (or `npm run build`) to verify routes register as dynamic: ``` Route (app) Size First Load JS ├ ƒ /opengraph-image 0 B 0 B ├ ƒ /twitter-image 0 B 0 B ``` The `ƒ` indicates dynamic (edge) functions. ## Common Issues | Issue | Solution | |-------|----------| | Text not rendering | Add `display: "flex"` to text wrapper | | Layout broken | Ensure all containers have `display: "flex"` | | Colors wrong | Use hex colors, not CSS variables | | SVG not showing | Add explicit width/height attributes | | Gradient text invisible | Need both `backgroundClip: "text"` AND `color: "transparent"` | ## Extended Patterns See [patterns.md](references/patterns.md) for complete examples including: - Flywheel diagrams - Document/writing visuals - Code window icons - Network/connection graphics - Journey path visualizations

creating-share-images

Scan your own AI components