From Next.js ImageResponse
Migrate from Next.js ImageResponse to Takumi with your existing components.
Takumi aims to create a universal image generation library that can be used in any environment and not just limited to JavaScript runtime.
This guide is for people plan to use Takumi in Next.js, if you are looking for WASM bindings, check out Use Takumi in Browser instead.
Installation
npm i @takumi-rs/image-response @takumi-rs/corenext.config.ts
Takumi uses N-API under the hood, it should be opted-out from Server Components bundling and use native Node.js require function.
export const config = {
serverExternalPackages: ["@takumi-rs/core"],
};The route.ts
- import { ImageResponse } from "next/og";
+ import ImageResponse from "@takumi-rs/image-response";
// Takumi comes with full axis Geist and Geist Mono by default,
// if this is what you want, you can just remove fonts array.
const fonts = [
{
name: "Inter",
data: await fetch("/fonts/Inter-Regular.ttf").then((res) => res.arrayBuffer()),
style: "normal",
weight: 400
}
];
function OgImage({ title }: { title: string }) {
return (
<div>
<h1>Hello from {title}!</h1>
</div>
);
}
export function GET(request: Request) {
return new ImageResponse(<OgImage title="Next.js" />, {
width: 1200,
height: 630,
fonts,
});
}Now you have an GET handler with Takumi setup!
If theres any issues or unexpected behavior, please open an issue on our GitHub repository.