OG Images

Overview

ZeroStarter generates dynamic Open Graph images for social media previews using takumi-js. Each page type has its own OG image route.

Endpoints

How It Works

OG images are generated as static routes at build time using generateStaticParams. They return PNG images with immutable cache headers (1 year).

The shared utility at web/next/src/lib/og-image.tsx creates consistent images with:

• Dark gradient background
• Page title and description
• Section label (e.g., "Documentation", "Blog")
• App name branding

ImageResponse is imported from takumi-js/response, and takumi-js is listed in serverExternalPackages in next.config.ts so the native/WASM renderer loads at runtime.

Customizing

To add OG images for a new content source, create a route at web/next/src/app/api/og/<section>/[[...slug]]/route.tsx that forwards to the shared helper:

import { config } from "@/lib/config"
import { generateOgImage } from "@/lib/og-image"
import { yourSource } from "@/lib/source"

export const dynamic = "force-static"

export async function GET(_req: Request, { params }: { params: Promise<{ slug?: string[] }> }) {
  const { slug } = await params

  return generateOgImage(slug, {
    source: yourSource,
    sectionName: "Your Section",
    defaultTitle: `${config.app.name} - Your Section`,
    defaultDescription: `Your default description`,
  })
}

export function generateStaticParams() {
  return yourSource.generateParams().map((params) => ({
    slug: params.slug ?? [],
  }))
}

For a one-off route (no source), use ImageResponse directly — see web/next/src/app/api/og/home/route.tsx and /hire/route.tsx as references.

Note: takumi-js v1 changed the default display from flex to inline. Every flex container in your OG JSX must set display: "flex" explicitly (the existing routes already do this).

Metadata Integration

OG images are automatically referenced in page metadata via generatePageMetadata() in web/next/src/lib/fumadocs.tsx. Each docs and blog page gets a unique OG image URL based on its slug.