Pages Router - OGify | Generate beautiful Open Graph images in minutes

Important: Add OGify packages to serverExternalPackages in your next.config.js:

const nextConfig = {
  ...
  experimental: {
    serverExternalPackages: ["@ogify/core", "@ogify/templates"],
  },
  ...
};

module.exports = nextConfig;

This prevents Next.js from bundling OGify packages, which is necessary for proper font loading and image generation.

For Next.js projects using the Pages Router, generate OG images using API Routes.

Using API Routes

Create the API Route

Create a file at pages/api/og.ts:

import { createRenderer } from '@ogify/core';
import template from '@ogify/templates/basic';
import type { TemplateParams } from '@ogify/templates/basic';
import type { NextApiRequest, NextApiResponse } from 'next';

const renderer = createRenderer<{ basic: TemplateParams }>({
  templates: { basic: template },
});

export default async function handler(req: NextApiRequest, res: NextApiResponse) {
  const { title } = req.query;

  const imageBuffer = await renderer.renderToImage('basic', {
    title: (title as string) || 'Hello World',
    layout: 'centered',
  });

  res.setHeader('Content-Type', 'image/png');
  res.send(imageBuffer);
}

Use in Pages

In your pages, point the og:image meta tag to your API route.

import Head from 'next/head';

export default function Page() {
  return (
    <>
      <Head>
        <title>My Page</title>
        <meta property="og:image" content="/api/og?title=My Page" />
        <meta name="twitter:image" content="/api/og?title=My Page" />
        <meta name="twitter:card" content="summary_large_image" />
      </Head>
      <h1>My Page</h1>
    </>
  );
}

App RouterGenerate OG images using File Conventions or Route Handlers in Next.js App Router

​Using API Routes

Using API Routes