next/og

Make sure to read their Metadata section for the fundamentals of Metadata API.

Metadata Image

You can generate metadata images dynamically using next/og.

Add the following under your loader, and define image metadata for pages:

import { type InferPageType } from 'fumadocs-core/source';

export function getPageImage(page: InferPageType<typeof source>) {
  const segments = [...page.slugs, 'image.png'];

  return {
    segments,
    url: `/og/docs/${segments.join('/')}`,
  };
}

We append image.png to the end of slugs so that we can access it via /og/docs/my-page/image.png.

Finally, create a route handler to generate images at build time:

app/og/docs/[...slug]/route.tsx

import { getPageImage, source } from '@/lib/source';
import { notFound } from 'next/navigation';
import { ImageResponse } from 'next/og';
import { generate as DefaultImage } from 'fumadocs-ui/og';

export const revalidate = false;

export async function GET(
  _req: Request,
  { params }: RouteContext<'/og/docs/[...slug]'>,
) {
  const { slug } = await params;
  const page = source.getPage(slug.slice(0, -1));
  if (!page) notFound();

  return new ImageResponse(
    (
      <DefaultImage
        title={page.data.title}
        description={page.data.description}
        site="My App"
      />
    ),
    {
      width: 1200,
      height: 630,
    },
  );
}

export function generateStaticParams() {
  return source.getPages().map((page) => ({
    lang: page.locale,
    slug: getPageImage(page).segments,
  }));
}

You can specify options for Satori (used by next/og), see https://github.com/vercel/satori for reference.

Other Presets

There's other available styles on Fumadocs CLI, such as mono:

npx @fumadocs/cli@latest add og/mono

Replaced your old generate with the installed one.

Metadata Image

Other Presets

On this page