next/og
Usage with Next.js Metadata API.
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:
export function getPageImage(page: (typeof source)['$inferPage']) {
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:
import { getPageImage, source } from '@/lib/source';
import { notFound } from 'next/navigation';
import { ImageResponse } from 'next/og';
import { generate as DefaultImage } from 'fumadocs-ui/og';
import { appName } from '@/lib/shared';
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={appName} />,
{
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/monoReplace your old generate with the installed one.
How is this guide?