NextJS fails with UND_ERR_REQ_CONTENT_LENGTH_MISMATCH after redirect from server

If your NextJS App Router app is throwing this error:

UND_ERR_REQ_CONTENT_LENGTH_MISMATCH 

Then it’s likely that you are using fetch which is the standard option for making HTTP requests. There was an open issue for using Fetch within NextJS since NextJS wraps the default fetch with their own implementation. To help isolate this issue, we replaced fetch with axios, and it resolved the errors!

Dealing with errors is a part of life when you are a coder

Undici is the underlying name of fetch() in Node, which explains the UND part of the error message.

To resolve this issue, just use a different HTTP client, such as:

1. Axios
2. Got
3. SuperAgent

Here is the default fetch in NextJS:

var requestOptions: RequestInit = {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify({
      text: text,
    }),
    redirect: "follow",
  };

  const apiUrl = `${baseUrl}/api/yourApi/`;

  try {
    let res = await fetch(apiUrl, requestOptions);
    const responseData = await res.json();    
    return responseData;
  } catch (error) {
    console.error("Error during fetch:", error);
    throw error; // Re-throw to handle it accordingly
  }