next/og | Hanzo Docs

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:

lib/source.ts

app/docs/[[...slug]]/page.tsx

import { type InferPageType } from '@hanzo/docs/core/source';

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

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

import { notFound } from 'next/navigation';
import { source, getPageImage } from '@/lib/source';
import type { Metadata } from 'next';

export async function generateMetadata(props: PageProps<'/docs/[[...slug]]'>): Promise<Metadata> {
  const params = await props.params;
  const page = source.getPage(params.slug);
  if (!page) notFound();

  return {
    title: page.data.title,
    description: page.data.description,
    openGraph: {
      images: getPageImage(page).url,
    },
  };
}

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 '@hanzo/docs-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 Hanzo Docs CLI, such as mono:

npm

pnpm

yarn

bun

npx @hanzo/docs-cli@latest add og/mono

pnpm dlx @hanzo/docs-cli@latest add og/mono

yarn dlx @hanzo/docs-cli@latest add og/mono

bun x @hanzo/docs-cli@latest add og/mono

Replace your old generate with the installed one.