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.
It delivers up to 10x performance improvement compared to next/og shown in the Image Bench.
Installation
npm i @takumi-rs/image-responseMark as external
By default Next.js bundles the @takumi-rs/core package, which requires native Node.js require function to resolve the native binary. You need to opt-out from the bundling by setting the serverExternalPackages option.
export const config = {
serverExternalPackages: ["@takumi-rs/image-response"],
};Code changes
import { } from "next/og";
import { } 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 = [
{
: "Inter",
: await ("/fonts/Inter-Regular.ttf").(() => .()),
: "normal",
: 400
}
];
function ({ }: { : string }) {
return (
<>
<>Hello from {}!</>
</>
);
}
export function (: Request) {
return new (< ="Next.js" />, {
: 1200,
: 630,
,
});
}For WASM environment
If you are using in Edge runtime or a browser environment like Cloudflare Workers, you can import from the @takumi-rs/image-response/wasm package.
import { } from "@takumi-rs/image-response";
import { } from "@takumi-rs/image-response/wasm";
import from "@takumi-rs/wasm/next";
new (<OgImage ="Next.js" />, {
,
: 1200,
: 630,
// @noErrors
,
});Now you have an GET handler with Takumi setup!
If theres any issues or unexpected behavior, please open an issue on our GitHub repository.
Last updated on