Getting error while trying to deploy NextJS in Vercel, RequestContentLengthMismatchError: Request body length does not match content-length header

Question

Getting error while trying to deploy NextJS in Vercel.

Local "npm run build" and "npm run start" is working without any issue. But for the same codebase facing deployment error in Vercel.

Using NextJS V14.0.1, even tried with V13.4.12 & V13.4.7 also but no luck, getting same error.

Have implemented Server Action wherever required also, e.g. redirect and async functions.

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'
  }
}

Can someone please help me with the above error resolution?

Answer 1

For the above problem, error was occurring because of problem in environment variable.

For one my environment, value was not set properly.

NEXT_PUBLIC_URL was set as https://${VERCEL_URL}/
NEXT_PUBLIC_API_URL was set as ${NEXT_PUBLIC_URL}/api

as a result NEXT_PUBLIC_API_URL was returning value as 'https://xyz.vercel.app//api', there was an extra '/' before the api in the url.

Fixing the environment variable as below solved the problem

NEXT_PUBLIC_API_URL was set as ${NEXT_PUBLIC_URL}api