@vercel/og api route isn't displaying correct image

Question

I have my nextjs app hosted on vercel edge, and I am trying to configure the vercel/og package: https://vercel.com/docs/concepts/functions/edge-functions/og-image-generation

When I load the api route /api/og on the application it simply shows a blank image, but it should contain some basic text.

// /pages/api/og.js
import { ImageResponse } from '@vercel/og'


export const config = {
  runtime: 'experimental-edge',
};

export const handler = (request) => {

  return new ImageResponse(
    (
      <div>
        <p>test</p>
      </div>,
      {
        width: 1200,
        height: 630
      }
    )
  );
};

export default handler;

It may be related to how I am passing the url to the metatag, but from what I can see it is correct.

const baseUrl = process.env.NEXT_PUBLIC_HOST;

<meta property='og:image' content={`${baseUrl}/api/og`} />

I have configured the environment variables on vercel so that the value of NEXT_PUBLIC_HOST is the domain of the website, excluding the trailing /. Based on the docs this is all I need to do. Any help would be much appreciated!

Answer 1

For some reason it appears that providing a width and height property prevents this from working.