Next.js Discord

Discord Forum

how to add google-font for ImageResponce (opegraph-image)?

Unanswered
Weevil parasitoid posted this in #help-forum
Open in Discord
Weevil parasitoidOP
import { siteConfig } from "@/data/site";
import { ImageResponse } from "next/og";

export const runtime = "nodejs";

export const alt = siteConfig.name;
export const size = {
width: 1200,
height: 630,
};
export const contentType = "image/png";

export default async function Image() {
try {

return new ImageResponse(
(
<div
tw={flex flex-col gap-2 p-12 items-center justify-center w-full h-full bg-white text-black}
>
<div tw="text-8xl mb-4 flex items-center text-center justify-center">
{siteConfig.name}
</div>
<div tw="text-2xl flex items-center text-center justify-center">
{siteConfig.description}
</div>
</div>
),
{
...size,
}
);
} catch (e: any) {
console.log(${e.message});
return new Response(Failed to generate the image, {
status: 500,
});
}
}

3 Replies

Weevil parasitoidOP
help
Weevil parasitoidOP
help