Next.js项目_document.js内ctx.req为undefined报错如何解决？

问题原因 #

• _document.js 的 getInitialProps 仅在首次服务端渲染请求时才会运行在 Node.js 环境，此时 ctx.req 才会存在；当你在客户端进行路由跳转时，_document.js 不会重新执行，不会触发该方法。
• 如果你开启了 Next.js 静态导出（执行 next export）、页面使用了静态生成（SSG，即配置了 getStaticProps），或是页面触发了 Next.js 的自动静态优化，构建/预渲染阶段运行 getInitialProps 时没有实际的用户请求流入，ctx.req 自然为 undefined。
• 若项目使用 Next.js 13+ 的 App Router，_document.js 仅在初始 HTML 生成阶段运行，非服务端渲染场景下也无法拿到 req 对象。

解决方案 #

1. 先增加空值判断，避免运行时报错

static async getInitialProps(ctx) {
  const props = await Document.getInitialProps(ctx);
  // 仅req存在时调用服务端token获取方法
  const userData = ctx.req ? await getServerSideToken(ctx.req) : {};
  return { ...userData, ...props }
}

2. 如果你需要在全路由场景下稳定获取用户身份信息，不要将逻辑放在 _document.js 中，按路由模式选对应方案：
   • Pages Router 场景：将获取逻辑移到页面的 getServerSideProps 中，该方法仅在服务端运行，每次请求都会触发，一定可以拿到 req 对象
   • App Router 场景：在服务端组件中直接通过 headers() / cookies() 方法获取请求头、Cookie 解析用户身份，不需要依赖 _document.js 传值
3. 若项目需要做静态导出，服务端 Token 获取逻辑本身不适用于静态部署场景，建议将用户身份校验逻辑移到客户端执行，通过接口请求拉取用户数据。

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