import { defineConfig } from '@ogpipe/next' export default defineConfig({ templates: { blog: { file: './og-templates/blog.html' }, }, routes: { '/blog/[slug]': { template: 'blog', vars: (meta) => ({ title: meta.title }), }, '*': { template: 'default' }, }, })
<!-- og-templates/blog.html --> <html> <head> <link href="https://fonts.googleapis.com/css2?family=Inter" /> <script src="https://cdn.tailwindcss.com"></script> </head> <body class="w-[1200px] h-[630px] flex flex-col p-16 bg-gradient-to-br from-slate-900 to-slate-800"> <h1 class="text-5xl font-bold text-white">{{title}}</h1> <p class="text-xl text-slate-400 mt-4">{{description}}</p> <p class="text-lg text-slate-500 mt-auto">{{author}}</p> </body> </html>
$ next build && ogpipe generate ⚡ OGPipe — Generating OG images... ✅ Generated 24 OG images in 3.8s /blog/hello-world → /og/blog/hello-world.png (320ms) /blog/scaling-apis → /og/blog/scaling-apis.png (380ms) /blog/react-patterns → /og/blog/react-patterns.png (350ms) /about → /og/about.png (290ms) ... 📁 Output: public/og/ 📋 Manifest: public/og/og-manifest.json
↓ What gets generated
