The Complete Production SOP: How to Deploy and Run Next.js Dynamic Open Graph (OG) Image Generation in Autonomous AI Agents

---
name: "nextjs-dynamic-og-image-generation"
description: "Generate branded, dynamic Open Graph social card images on-the-fly using @vercel/og and JSX."
metadata:
  author: "Vercel"
  version: "1.0.0"
  runtime_compatibility:
    - "codex"
    - "claude-code"
    - "cursor"
    - "windsurf"
triggers:
  - "generate dynamic og image nextjs"
  - "create opengraph-image.tsx"
  - "load custom font vercel og"
permissions:
  fs_read: true
  fs_write: "workspace"
  shell_exec: false
  net_access: false
---

# Execution SOP
1. Use ImageResponse from 'next/og'.
2. Export size ({ width: 1200, height: 630 }) and contentType ('image/png').
3. Use inline flexbox styling only. Disallow CSS grid or float.

import { ImageResponse } from 'next/og';

export const runtime = 'edge';
export const alt = 'Article Social Image';
export const size = { width: 1200, height: 630 };
export const contentType = 'image/png';

export default async function Image({ params }: { params: Promise<{ slug: string }> }) {
  const { slug } = await params;
  return new ImageResponse(
    (
      <div
        style={{
          height: '100%',
          width: '100%',
          display: 'flex',
          flexDirection: 'column',
          alignItems: 'flex-start',
          justifyContent: 'space-between',
          backgroundColor: '#0a0a0a',
          padding: '60px',
          color: '#ffffff',
        }}
      >
        <div style={{ fontSize: 28, color: '#888888', textTransform: 'uppercase' }}>
          Engineering Blog
        </div>
        <div style={{ fontSize: 64, fontWeight: 700, lineHeight: 1.1 }}>
          {slug.replace(/-/g, ' ')}
        </div>
        <div style={{ display: 'flex', alignItems: 'center', fontSize: 24, color: '#444444' }}>
          askills.dev
        </div>
      </div>
    ),
    { ...size }
  );
}

import { ImageResponse } from 'next/og';

export const runtime = 'edge';
export const size = { width: 1200, height: 630 };
export const contentType = 'image/png';

export default async function Image({ params }: { params: Promise<{ slug: string }> }) {
  const { slug } = await params;
  const interSemiBold = await fetch(
    new URL('../../../assets/Inter-SemiBold.ttf', import.meta.url)
  ).then((res) => res.arrayBuffer());

  return new ImageResponse(
    (
      <div
        style={{
          height: '100%',
          width: '100%',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          backgroundColor: '#09090b',
          color: '#f4f4f5',
          fontFamily: 'Inter',
        }}
      >
        <h1 style={{ fontSize: 56 }}>{slug}</h1>
      </div>
    ),
    {
      ...size,
      fonts: [
        {
          name: 'Inter',
          data: interSemiBold,
          style: 'normal',
          weight: 600,
        },
      ],
    }
  );
}

#!/usr/bin/env bash
set -euo pipefail

echo "Validating Open Graph Image exports..."
if ! grep -q "export const size" app/**/opengraph-image.tsx; then
  echo "Error: Missing mandatory 'export const size' declaration."
  exit 1
fi

echo "Verification passed successfully."