@softwareinfocus/next-og-image

Reusable Open Graph image helpers for Next.js App Router metadata image routes, with an optional Software InFocus preset template.

Features

• next/og image response wrapper with standard 1200x630 PNG defaults
• Helpers for static and dynamic opengraph-image.tsx routes
• Typed OG payload contract (OgImageData)
• SIF preset renderer + fallback data builders
• Works with Next.js 15+ App Router route metadata image files

Install

npm install @softwareinfocus/next-og-image

Peer dependencies:

• next@15
• react@19

Basic usage (static route)

import {
  OG_IMAGE_CONTENT_TYPE_PNG,
  OG_IMAGE_SIZE_1200x630,
  createStaticOgImageHandler,
} from '@softwareinfocus/next-og-image'
import { createSifFallbacks, createSifOgRenderer } from '@softwareinfocus/next-og-image/presets/sif'

export const alt = 'Site social preview image'
export const size = OG_IMAGE_SIZE_1200x630
export const contentType = OG_IMAGE_CONTENT_TYPE_PNG
export const runtime = 'edge'
export const revalidate = 3600

const render = createSifOgRenderer({
  brandName: 'Software InFocus',
  domainLabel: 'softwareinfocus.com',
})

const fallbacks = createSifFallbacks({ brandName: 'Software InFocus' })

export default createStaticOgImageHandler({
  fallbackData: fallbacks.global,
  render,
})

Basic usage (dynamic route)

import { createDynamicOgImageHandler } from '@softwareinfocus/next-og-image'
import { createSifFallbacks, createSifOgRenderer } from '@softwareinfocus/next-og-image/presets/sif'

const render = createSifOgRenderer()
const fallbacks = createSifFallbacks()

export default createDynamicOgImageHandler<{ slug: string }, 'blog'>({
  resolveData: async ({ slug }) => {
    const post = await getPostBySlug(slug)
    if (!post) return null

    return {
      type: 'blog',
      title: post.title,
      subtitle: post.description,
      chips: post.tags,
    }
  },
  fallbackData: fallbacks.section.blog,
  render,
})

Notes

• Keep export const runtime = 'edge' in your route file for predictable next/og behavior.
• Keep export const revalidate = 3600 (or your preferred cache interval) in each route.
• twitter-image.tsx can re-export from ./opengraph-image in most projects.
• Fonts are optional. Provide loadFonts in createSifOgRenderer() if you want custom typography.

Development

pnpm install
pnpm build
pnpm test

License

MIT