生产环境下Next.js动态OG图片链接错误指向localhost:3000求助

• 设置生产环境域名环境变量
  部署时添加NEXT_PUBLIC_APP_URL环境变量，值为你的完整生产域名（如https://mywebsite.com）。如果用Vercel部署，可直接使用平台自动生成的VERCEL_URL变量，无需额外配置。

• 配置next.config.js（按需）
  若OG图片涉及自身域名的资源，在next.config.js中添加域名白名单：

  /** @type {import('next').NextConfig} */
  const nextConfig = {
    images: {
      remotePatterns: [
        {
          protocol: 'https',
          hostname: 'mywebsite.com',
        },
      ],
    },
  };
  
  module.exports = nextConfig;
  

• 修复反向代理配置（自部署场景）
  如果你用Nginx等反向代理部署，确保配置中传递正确的请求头，让Next.js识别真实域名：

  location / {
    proxy_pass http://localhost:3000;
    proxy_set_header Host $host;
    proxy_set_header X-Forwarded-For $remote_addr;
    proxy_set_header X-Forwarded-Proto $scheme;
  }
  

• 手动指定OG图片URL（兜底方案）
  在页面的generateMetadata函数中，用环境变量拼接完整的OG图片URL：

  import { Metadata } from 'next';
  
  export async function generateMetadata(): Promise<Metadata> {
    const baseUrl = process.env.NEXT_PUBLIC_APP_URL || 'https://mywebsite.com';
    return {
      openGraph: {
        images: [`${baseUrl}/opengraph-image`],
      },
    };
  }
  

内容的提问来源于stack exchange，提问作者user19666029