NextJs构建后首次初始渲染异常问题求助

问题根源 #

Vercel部署完成后的首次初始渲染属于平台的预渲染/静态生成阶段，此时getInitialProps中不存在context.ctx.req对象（静态生成模式下无HTTP请求上下文），导致从req.headers.host提取的值为undefined。而刷新页面时触发的是服务器端渲染(SSR)，此时存在完整的请求上下文，能正常获取到host。

修复方案 #

修改_app.tsx中的getInitialProps逻辑，增加对req不存在的兼容处理，同时利用Vercel提供的环境变量兜底：

1. 兼容无请求上下文的场景：优先从req.headers.host取值，不存在则使用process.env.VERCEL_URL（Vercel部署后自动注入的环境变量，值为项目默认域名）；如果使用自定义域名，可额外配置环境变量（比如NEXT_PUBLIC_CUSTOM_HOST）作为兜底。
2. 修改后的核心代码示例：

// 在_app.tsx的getInitialProps中
const getInitialProps = async (context: AppContext) => {
  // ...其他逻辑
  const host = context.ctx.req?.headers.host || process.env.VERCEL_URL || 'your-default-host.com';
  // ...传递host到pageProps
  return {
    pageProps: {
      // ...其他props
      host
    }
  };
};

额外说明 #

• 若项目使用Next.js 13+的App Router，建议改用generateMetadata或服务器组件获取请求上下文，比getInitialProps更适配Vercel的渲染模式。
• 自定义域名场景下，需在Vercel项目的环境变量中配置域名，并确保代码中优先读取该变量。

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