creating-share-images

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:

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(
    (
      
    ),
    { ...size }
  );
}