next/og
与 Next.js 元数据 API 一起使用。
确保阅读他们的元数据部分，了解元数据 API 的基础知识。
元数据图片
🌐 Metadata Image
你可以使用 next/og 动态生成元数据图片。
🌐 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('/')}`,
};
}我们在 slug 末尾添加 image.png，以便可以通过 /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';
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,
}));
}你可以为 Satori（由 next/og 使用）指定选项，参考 https://github.com/vercel/satori。
🌐 You can specify options for Satori (used by next/og), see https://github.com/vercel/satori for reference.
其他预设
🌐 Other Presets
Fumadocs CLI 上还有其他可用的样式，例如 mono：
🌐 There's other available styles on Fumadocs CLI, such as mono:
npx @fumadocs/cli@latest add og/mono将旧的 generate 替换为已安装的版本。
🌐 Replace your old generate with the installed one.
Last updated on