NextJS 为 opengraph 标签动态创建图像，但在生产中不起作用

Question

我正在开发一个 Next.js 项目，我需要动态生成 Open Graph 图像。我的实现可以在本地运行，但在 Vercel 和 Netlify 上部署到生产环境时遇到问题。

当地环境：

• 动态图像生成效果完美。这是工作代码：GitHub 存储库。

生产中的问题：

Vercel 部署：

• 部署于：Vercel 应用程序链接。
• 问题：如果您复制图像链接并在新选项卡中打开它，则需要身份验证才能查看，但事实不应该如此。

Netlify 部署：

• 部署于：Netlify 应用程序链接。
• 问题：图像 URL 指向

  localhost

  而不是生产 URL。

问题：

• 如何解决 Vercel 上动态生成的图像的身份验证问题？
• 为什么 Netlify 上的图像 URL 指向

  localhost

  ，如何更正它以使用生产 URL？

任何解决这些问题的见解或建议将不胜感激！

参考：我按照 Vercel 文档 进行此实现。

Answer 1

关于：

• 为什么图像 URL 指向 Netlify 上的 localhost，如何更正它以使用生产 URL？

您应该能够在

metadataBaseUrl

对象中使用

metadata

。您可以通过这种方式使用它，例如 Vercel 部署：

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

同样适用于不同的环境变量或部署服务。

现在，关于：

• 如何解决 Vercel 上动态生成的图像的身份验证问题？

我的情况也完全一样。我也在github中发现了这个问题：https://github.com/vercel/next.js/discussions/50546#discussioncomment-8052317