From Next.js ImageResponse

Takumi aims to create a universal image generation library that can be used in any environment and not just limited to JavaScript runtime.

Takumi uses the same JSX-first API shape with a Rust rendering engine built for fast image generation. See current benchmark runs on Image Bench for the latest comparison with next/og.

Installation

npm i takumi-js

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.

next.config.ts

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

export default config;

Code changes

import {  } from "next/og"; 
import {  } from "takumi-js/response"; 

// Takumi comes with 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,
    ,
    : "twemoji",
  });
}

Now you have an GET handler with Takumi setup!

If theres any issues or unexpected behavior, please open an issue on our GitHub repository.

From Next.js ImageResponse

Installation

Mark as external

Code changes

On this page