OG Image Generator Boilerplate — 50 Templates + Next.js 15

About this product

Every page on your site has a social preview. About 5% of them look good. The rest are generic, blurry, or missing entirely. Building dynamic OG images the right way means wiring up @vercel/og, learning Satori's CSS subset, hand-designing every template, validating params, bundling fonts, setting caching headers, and building a preview UI so you can QA the renders. That's two days you don't have. This boilerplate gives you all of it in 15 minutes.

What you get

A complete, runnable Next.js 15 + TypeScript project that:

  • Exposes /api/og/[template] — a query-param-driven endpoint that returns a 1200×630 PNG rendered from a React template by @vercel/og. Hit it from your og:image meta tag; every page gets a unique, beautiful preview.
  • Ships 50 visually distinct templates across 12 categories — blog posts, product launches, SaaS, podcast episodes, courses, social quotes, events, e-commerce, GitHub repos, docs pages, newsletters, and clean generic fallbacks. Each is a plain React component you can customize.
  • Includes a /preview page — a clean UI where you select any template, fill in the params via a form, see the actual server-rendered image live, and copy the final URL. Essential for QA. Useful for showing clients.
  • Handles the parts everyone gets wrong — correct Satori-safe JSX patterns, font bundling, parameter validation via zod, type-safe template registry, and the right caching headers (immutable for parameterized requests; short-lived for defaults).
  • Deploys cleanly to Vercel (the recommended path, since @vercel/og is theirs) — and to any Node.js host with no code changes.

The 50 templates

Blog Post (5) · Classic, Bold, Magazine, Minimal, Card
Product Launch (5) · Spotlight, Logo+Tag, Announcement, Feature Strip, Card
SaaS / App (5) · Hero, Feature Bullets, Pricing, Changelog, Status
Podcast (4) · Classic, Square Art, Quote, Show
Course (4) · Lesson, Banner, Progress, Instructor
Quote (4) · Classic, Card, Avatar, Bold
Event / Webinar (4) · Date Block, Banner, Conference, Webinar
E-commerce (4) · Product, Sale, Collection, 5-Star
GitHub (4) · Repo, Release, Issue, Readme
Docs / API (4) · Page, API Endpoint, Tutorial, Reference
Newsletter (3) · Issue, Recap, Feature
Generic (4) · Brand, Headline, Twitter Card, Promo

Adding your own template takes about 10 minutes

Each template is a plain React/JSX component plus a small declaration of its slug, name, param schema, and defaults. The README walks through it end-to-end — drop a file in templates/, register it, and it appears in the preview UI and the API. The included defineTemplate() helper means each new template is around 30 lines of code.

Who it's for

  • Indie hackers and small teams running Next.js sites who want production OG images without spending two days on infrastructure.
  • Agencies shipping client work who need a customizable starting point per project.
  • Anyone who's tried to build OG images with @vercel/og from scratch, hit a Satori CSS-subset error, and decided they had better things to do.

What you don't get to skip with this

You still need to deploy it (Vercel recommended) and update your og:image meta tags to point at the new endpoint. Both are covered step-by-step in SETUP.md. After that you're done — caching is automatic, the endpoint is immutable per-URL, and a single deploy renders OG images for your entire site.

What's included

  • Complete Next.js 15 + TypeScript boilerplate
  • 50 professionally designed OG image templates (12 categories)
  • Dynamic /api/og/[template] endpoint — URL-param driven, 1200×630 PNG output
  • Live preview page with template picker, dynamic form, and Copy URL action
  • Correct Satori-safe JSX patterns and bundled fonts (DejaVu Sans)
  • Type-safe template registry with zod-validated query params
  • Cache-Control headers (immutable when parameterized, short TTL on defaults)
  • Vercel-ready (vercel.json included) + works on any Node.js host
  • Walkthrough README and SETUP.md (deploy + custom domain + adding templates)
  • Commercial license — unlimited personal + client / agency use
FAQ

About OG Image Generator Boilerplate — 50 Templates + Next.js 15

?

How does the OG image generation work?

You hit /api/og/[template]?title=...&description=... and get back a 1200×630 PNG rendered by @vercel/og (which uses Satori under the hood). Point your <meta property="og:image" /> tag at that URL and every page on your site gets a unique social preview automatically — without you generating an image asset per page.

?

Do I need Vercel to use this?

Vercel is the easiest deploy target and is recommended (the boilerplate ships with a vercel.json that sets the right caching headers and region). But the route uses runtime: 'nodejs' so it also works on any Node.js host that supports Next.js 15 — Render, Railway, Fly, your own VPS, an ECS task, a Docker container, anywhere. SETUP.md covers both paths.

?

Can I add my own templates?

Yes — and it's the whole point. Each template is a plain React/JSX component plus a small defineTemplate() declaration of its slug, name, fields, and defaults. The README walks through adding one end-to-end — drop a file in templates/, register it in templates/index.ts, and it appears in the preview UI and the API. About 10 minutes per new template.

?

What's the live preview page for?

/preview is a UI where you select any template from a dropdown, fill in its params via a form (the form fields update per template based on its schema), see the actual server-rendered image live, and copy the final URL. Useful for QA-ing your renders as you customize templates, for showing clients design options, and for hand-crafting one-off OG URLs for important pages.

?

Can I use this for client projects?

Yes — the license covers unlimited personal AND client / agency use. Build OG generators for client projects, ship them under your own name, embed the boilerplate inside larger products you deliver. The only restriction is you can't resell the boilerplate itself or the included templates as a competing starter pack. See LICENSE.txt for the exact terms.

?

Do I have to bundle Inter or some specific font?

No — the boilerplate ships with DejaVu Sans (Regular and Bold) in public/fonts/. DejaVu has broad Unicode coverage, an open license, and looks clean at every size used by the templates. To swap in your own font (Inter, Geist, your brand sans, anything), drop the TTFs into public/fonts/ and edit lib/fonts.ts — about 4 lines of change. The font family name inside Satori stays as 'Sans' so no template code changes.

?

What's the catch with @vercel/og?

Satori (which @vercel/og wraps) only supports a CSS subset — primarily flexbox with no CSS grid, no float, and a few other limits. Every template in this boilerplate is already written to that subset, so you don't have to learn it. If you write new templates, the README has the rules in one place — and the preview page surfaces any errors immediately.