Next.js Discord

Discord Forum

ImageResponse with geistMono

Unanswered
Turkish Van posted this in #help-forum
Open in Discord
Turkish VanOP
import PostsService from "@/infra/services/posts";
import { ImageResponse } from "next/og";
import { promises } from "fs";
import { join } from "path";

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

export default async function Image({ params }: { params: { id: number } }) {
    const post = await new PostsService().get(params.id);
    const fontData = await promises.readFile(
        join(process.cwd(), "public/GeistMono-Regular.otf"),
    );
    const font = Uint8Array.from(fontData).buffer;

    return new ImageResponse(
        <div
            style={{
                fontSize: 48,
                background: "white",
                width: "100%",
                height: "100%",
                display: "flex",
                flexDirection: "column",
                alignItems: "center",
                justifyContent: "center",
                backgroundSize: "cover",
                fontStyle: "italic",
            }}
        >
            ...
        </div>,
        {
            ...size,
            fonts: [
                {
                    data: font,
                    name: "GeistMono",
                },
            ],
        },
    );
}

1 Reply

Turkish VanOP
and I receive this error: ⨯ [Error: failed to pipe response] {
[cause]: Error: lookupType: 6 - substFormat: 1 is not yet supported
at Array.forEach (<anonymous>)
at Array.forEach (<anonymous>)
at Array.filter (<anonymous>)
}