Takumi

Installation

npm install takumi-js

takumi-js loads a native binding (@takumi-rs/core) on Node.js. Mark it as external to keep it out of the server bundle:

next.config.ts

import type { NextConfig } from 'next';

const config: NextConfig = {
  serverExternalPackages: ['@takumi-rs/core'],
};

Metadata Image

Add a function that returns the image URL of a page, and reference the image in the metadata of docs pages:

export function getPageImageUrl(page: (typeof source)['$inferPage']) {
  const segments = [...page.slugs, 'image.webp'];

  return {
    segments,
    url: '/' + [page.locale, 'og', 'docs', ...segments].filter(Boolean).join('/'),
  };
}

The image of /docs/my-page is at /og/docs/my-page/image.webp, since WebP images are smaller than PNG ones. To generate PNG, use image.png and format: 'png' instead.

Then create a route to generate the images:

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

import { getPageImageUrl, source } from '@/lib/source';
import { notFound } from 'next/navigation';
import { generateOGImage } from 'fumadocs-ui/og/takumi';

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 generateOGImage({
    title: page.data.title,
    description: page.data.description,
    site: 'My App',
    format: 'webp',
  });
}

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

Takumi bundles the full-axis (100-900) Geist and Geist Mono fonts, so no font setup is needed.

See Takumi's Documentation for advanced usage.

Other Templates

See Takumi Templates for the available templates.

InstallationCopy Anchor Link

Metadata ImageCopy Anchor Link

Other TemplatesCopy Anchor Link

On this page

Installation

Metadata Image

Other Templates