I am currently facing an issue with my Next.js app hosted on Vercel Edge while trying to set up the Vercel/og package. You can find more information about it here: https://vercel.com/docs/concepts/functions/edge-functions/og-image-generation
Upon loading the API route /api/og, the application displays a blank image instead of the expected 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;
The issue might be related to how I am passing the URL to the meta tag, although it appears to be correct based on my observation.
const baseUrl = process.env.NEXT_PUBLIC_HOST;
<meta property='og:image' content={`${baseUrl}/api/og`} />
I have properly configured the environment variables on Vercel, setting the value of NEXT_PUBLIC_HOST as the website domain without the trailing '/'. According to the documentation, this should suffice. Any assistance would be highly appreciated!