使用generateMetadata本地正常，部署Vercel后数据undefined排查

以下是针对该问题的排查和解决步骤：

• 检查环境变量一致性
  本地开发时的环境变量（如GraphQL接口地址、API密钥）需要在Vercel项目的「Settings → Environment Variables」中完全同步配置，确保变量名称和值无拼写错误。Vercel部署时不会自动读取本地.env文件，必须手动配置。

• 调整数据获取的缓存策略
  Next.js在Vercel部署时会对generateMetadata中的数据获取进行预渲染缓存，如果getPostBySlug默认使用缓存策略，可能导致获取旧数据或空数据。可在getPostBySlug的请求中显式设置缓存规则：

  async function getPostBySlug(slug) {
    const res = await fetch(process.env.GRAPHQL_ENDPOINT, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        query: `query GetPost($slug: String!) { post(where: {slug: $slug}) { excerpt coverImage { url } } }`,
        variables: { slug }
      }),
      cache: 'no-store' // 禁用缓存，每次请求获取最新数据
      // 或使用 revalidate: 60 表示每60秒重新验证缓存
    });
    const data = await res.json();
    return data.post;
  }
  

• 添加错误处理与兜底逻辑
  部署环境中可能存在网络波动、GraphQL查询失败等情况，需在generateMetadata中增加错误捕获和兜底，避免因post为undefined导致页面崩溃：

  export async function generateMetadata({ params}: { params: { slug : string }}) {
    let post;
    try {
      post = await getPostBySlug(params.slug);
    } catch (err) {
      console.error('获取元数据失败:', err);
    }
  
    return {
      title: params.slug.split('-').join(' '),
      description: post?.excerpt || 'temporary description',
      openGraph: {
        images: post?.coverImage?.url ? [`/${post.coverImage.url}`] : ['/default-og-image.jpg']
      }
    };
  }
  

• 查看Vercel构建日志
  登录Vercel后台，找到对应项目的「Deployments」页面，查看具体构建日志，搜索generateMetadata相关报错信息（如GraphQL查询失败、权限错误等），日志可直接定位问题根源。

• 验证路由参数传递
  确认页面路由结构（如app/[slug]/page.js）中的params.slug是否正确传递到generateMetadata函数，Vercel的路由配置需和本地开发环境一致，避免参数传递异常导致查询失败。

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