在Vercel部署NextJS遭遇RequestContentLengthMismatchError求解决

问题描述 #

本地执行npm run build和npm run start均正常，但相同代码库部署到Vercel时出现以下问题：

• 页面预渲染失败
• fetch请求报错，根源为RequestContentLengthMismatchError（请求体长度与content-length头不匹配）
• 部分页面（如/404、/about）降级为客户端渲染

已尝试切换Next.js版本（v14.0.1、v13.4.12、v13.4.7），问题依然存在，且已按需实现Server Action（如redirect及异步函数）。

错误日志 #

Error occurred prerendering page "/sitemap.xml". Read more: https://nextjs.org/docs/messages/prerender-error
TypeError: fetch failed
    at Object.fetch (node:internal/deps/undici/undici:11576:11)
 ⚠ Entire page /404 deopted into client-side rendering. https://nextjs.org/docs/messages/deopted-into-client-rendering /404

   Generating static pages (15/31) 
 ⚠ Entire page /about deopted into client-side rendering. https://nextjs.org/docs/messages/deopted-into-client-rendering /about
TypeError: fetch failed
    at Object.fetch (node:internal/deps/undici/undici:11576:11) {
  cause: RequestContentLengthMismatchError: Request body length does not match content-length header
      at AsyncWriter.end (node:internal/deps/undici/undici:10355:19)
      at writeIterable (node:internal/deps/undici/undici:10263:16) {
    code: 'UND_ERR_REQ_CONTENT_LENGTH_MISMATCH'
  }
}
TypeError: fetch failed
    at Object.fetch (node:internal/deps/undici/undici:11576:11) {
  cause: RequestContentLengthMismatchError: Request body length does not match content-length header
      at AsyncWriter.end (node:internal/deps/undici/undici:10355:19)
      at writeIterable (node:internal/deps/undici/undici:10263:16) {
    code: 'UND_ERR_REQ_CONTENT_LENGTH_MISMATCH'
  }
}
Error occurred prerendering page "/about". Read more: https://nextjs.org/docs/messages/prerender-error
TypeError: fetch failed
    at Object.fetch (node:internal/deps/undici/undici:11576:11)
 ⚠ Entire page /disclaimer deopted into client-side rendering. https://nextjs.org/docs/messages/deopted-into-client-rendering /disclaimer
TypeError: fetch failed
    at Object.fetch (node:internal/deps/undici/undici:11576:11) {
  cause: RequestContentLengthMismatchError: Request body length does not match content-length header
      at AsyncWriter.end (node:internal/deps/undici/undici:10355:19)
      at writeIterable (node:internal/deps/undici/undici:10263:16) {
    code: 'UND_ERR_REQ_CONTENT_LENGTH_MISMATCH'
  }
}
TypeError: fetch failed
    at Object.fetch (node:internal/deps/undici/undici:11576:11) {
  cause: RequestContentLengthMismatchError: Request body length does not match content-length header
      at AsyncWriter.end (node:internal/deps/undici/undici:10355:19)
      at writeIterable (node:internal/deps/undici/undici:10263:16) {
    code: 'UND_ERR_REQ_CONTENT_LENGTH_MISMATCH'
  }
}

解决方案 #

• 检查fetch请求的Content-Length设置：如果手动指定了Content-Length请求头，必须确保其值与请求体的实际字节数完全一致。处理JSON或FormData时，建议不要手动设置该头，让Next.js内置的undici自动处理。
• 避免静态预渲染阶段发起带请求体的fetch：在静态生成（SSG）的页面中，不要调用POST/PUT等带body的fetch请求。可以将这类请求移到Server Component、Client Component中动态执行，或者改用getServerSideProps实现服务器端渲染。
• 锁定undici版本：这个错误与undici的请求体处理逻辑相关，可在package.json中指定稳定版本的undici（比如"undici": "5.28.4"），然后重新执行npm install更新依赖。
• 规范Server Action的使用场景：不要在静态页面的getStaticProps中调用Server Action，仅在用户交互触发的函数（如表单提交）中使用Server Action。
• 强制页面使用服务器渲染：对出错的页面，在组件文件中添加export const dynamic = 'force-dynamic'，禁用静态预渲染，强制使用服务器端渲染，避免预渲染时的fetch错误。

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