Build-time Open Graph image generation for Next.js static export projects. No server, no edge functions – just static PNGs that work anywhere.
Docker (recommended):
docker compose --profile build up # Build static site + OG images
docker compose --profile preview up # Preview at http://localhost:8080Without Docker:
npm install
npm run build
npm run previewEdit scripts/generate-og-images.ts – add entries to the PAGES array:
{
slug: 'blog-my-post', // → public/og/og-blog-my-post.png
title: 'My Blog Post',
subtitle: 'An Interesting Topic',
description: 'What this post is about.',
badge: 'blog',
bgImage: 'assets/bg/custom.jpg', // optional
accentColors: { // optional
start: '#3b82f6',
middle: '#8b5cf6',
end: '#ec4899',
},
}Then reference in your HTML:
<meta property="og:image" content="https://mysite.com/og/og-blog-my-post.png" />dynamic-og/
├── scripts/
│ ├── generate-og-images.ts # OG generator (Satori → SVG → PNG)
│ └── download-fonts.ts # Google Fonts downloader
├── app/ # Next.js preview app
├── assets/bg/ # Background images
├── assets/fonts/ # Fonts (auto-downloaded)
├── public/og/ # Generated OG images (build output)
├── docker-compose.yml # Dev / Build / Preview profiles
└── nginx.conf # Preview server config
| Package | Purpose |
|---|---|
| satori | JSX → SVG |
| @resvg/resvg-js | SVG → PNG (Rust/WASM) |
| Next.js | Static site generator |
| Command | Description |
|---|---|
docker compose --profile dev up |
Dev server (port 3000) |
docker compose --profile build up |
Build site + OG images |
docker compose --profile preview up |
Serve output (port 8080) |