Next.js
Use Takumi to render your React components on the server.
route.tsx
OgImage.tsx
next.config.ts
Mark Takumi core as a server-external package
Next.js bundles server code by default. The Rust binding is loaded via require, so it has to stay external.
import type { NextConfig } from "next";
const config: NextConfig = {
serverExternalPackages: ["@takumi-rs/core"],
};
export default config;Write the OG component
type OgImageProps = { title: string; description: string };
export default function OgImage({ title, description }: OgImageProps) {
return (
<div
style={{
width: "100%",
height: "100%",
display: "flex",
flexDirection: "column",
justifyContent: "center",
padding: "64px",
backgroundImage: "linear-gradient(to bottom right, #fff7ed, #fecaca)",
}}
>
<p style={{ fontSize: 72, fontWeight: 700, color: "#111827" }}>{title}</p>
<p style={{ fontSize: 42, fontWeight: 500, color: "#4b5563" }}>{description}</p>
</div>
);
}Return it from a route handler
import { ImageResponse } from "takumi-js/response";
import OgImage from "./OgImage";
export function GET(request: Request) {
const url = new URL(request.url);
const title = url.searchParams.get("title") ?? "Takumi + Next.js";
const description = url.searchParams.get("description") ?? "Render OG images with React.";
return new ImageResponse(<OgImage title={title} description={description} />, {
width: 1200,
height: 630,
});
}Gotchas
Cannot find native binding on pnpm or yarn. The @takumi-rs/core native binding has to be hoisted next to the package that requires it. Add a hoist pattern to .npmrc and reinstall:
public-hoist-pattern[]=@takumi-rs/core-*Edge runtime. Switch to export const runtime = "edge" in your route file. Takumi auto-selects the WASM build through the takumi-js/response entrypoint — no other config required.
Edit on GitHub
Last updated on