commerce/components/opengraph-image.tsx

import { readFile } from 'fs/promises';
import { ImageResponse } from 'next/og';
import { join } from 'path';
import LogoIcon from './icons/logo';

export type Props = {
  title?: string;
};

async function getFont() {
  'use cache';

  const file = await readFile(join(process.cwd(), './fonts/Inter-Bold.ttf'));

  return Uint8Array.from(file).buffer;
}

export default async function OpengraphImage(
  props?: Props
): Promise<ImageResponse> {
  const { title } = {
    ...{
      title: process.env.SITE_NAME
    },
    ...props
  };

  const font = await getFont();

  return new ImageResponse(
    (
      <div tw="flex h-full w-full flex-col items-center justify-center bg-black">
        <div tw="flex flex-none items-center justify-center border border-neutral-700 h-[160px] w-[160px] rounded-3xl">
          <LogoIcon width="64" height="58" fill="white" />
        </div>
        <p tw="mt-12 text-6xl font-bold text-white">{title}</p>
      </div>
    ),
    {
      width: 1200,
      height: 630,
      fonts: [
        {
          name: 'Inter',
          data: font,
          style: 'normal',
          weight: 700
        }
      ]
    }
  );
}