NextJS dynamically created Image for opengraph tags not working in production

Question

I'm working on a Next.js project where I need to dynamically generate Open Graph images. My implementation works locally, but I'm facing issues when deploying to production on Vercel and Netlify.

Local Environment:

• The dynamic image generation works perfectly. Here's the working code: GitHub Repository.

Issues in Production:

Vercel Deployment:

• Deployed at: Vercel App Link.
• Issue: If you copy the image link and open it in a new tab then it requires authentication to be viewed, which shouldn't be the case.

Netlify Deployment:

• Deployed at: Netlify App Link.
• Issue: The image URL is pointing to localhost instead of the production URL.

Questions:

• How can I fix the authentication issue for the dynamically generated image on Vercel?
• Why is the image URL pointing to localhost on Netlify, and how can I correct it to use the production URL?

Any insights or suggestions to resolve these issues would be greatly appreciated!

Reference: I followed the Vercel Documentation for this implementation.

Answer 1

Regarding:

• Why is the image URL pointing to localhost on Netlify, and how can I correct it to use the production URL?

You should be able to use metadataBaseUrl in your metadata object. You could use it this way, in example for Vercel deployments:

metadataBase: process.env.VERCEL_URL
    ? new URL(`https://${process.env.VERCEL_URL}`)
    : new URL(`http://localhost:${process.env.PORT || 3000}`),

Same would apply for a different env variable or deployment service.

Now, regarding:

• How can I fix the authentication issue for the dynamically generated image on Vercel?

It exactly happens the same to me. I found this issue in github too: https://github.com/vercel/next.js/discussions/50546#discussioncomment-8052317

EDIT: I fixed it using a hardcoded metadataBase instead of the autogenerated VERCEL_URL, which uses the deploy link instead of my own domain (which anyways should be public, but idk)

EDIT2: Ok, this was the issue, I had it enabled by default for the new project this config:

which asks for auth for every domain except production ones and it seems somehow Vercel doesnt take autogenerated URL as a production link even though it is.