Скачать или смотреть How to Fix the TypeError: Body is unusable Issue in Next.js Server Actions

Encountering a `TypeError: Body is unusable` error in your Next.js app? This guide offers a clear solution to fix this issue when using server actions.
---
This video is based on the question https://stackoverflow.com/q/77854953/ asked by the user 'Musiur Alam Opu' ( https://stackoverflow.com/u/18190002/ ) and on the answer https://stackoverflow.com/a/77855070/ provided by the user 'possum' ( https://stackoverflow.com/u/12050506/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, comments, revision history etc. For example, the original title of the Question was: TypeError: Body is unusable - NextJS Server Action POST

Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/l...
The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license.

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
Understanding the TypeError: Body is unusable Error in Next.js

As a developer using Next.js, you might occasionally run into some puzzling errors. One such error is the TypeError: Body is unusable, which can occur during the process of handling server actions in client components.

This issue arises under a specific condition when you attempt to read the body of a HTTP response more than once. Let's explore it in detail, help you understand why this happens, and most importantly, how to fix it!

The Scenario

Imagine you are building a verification feature in your Next.js app. You've crafted a function AccountVerificationAction to submit verification data and check for a response from the server. However, while everything seems to be working as expected, you encounter the TypeError: Body is unusable error.

Example Code Leading to the Error

Here’s the key section of the code they might encounter this problem:

[[See Video to Reveal this Text or Code Snippet]]

In the above code, the response.json() method is called twice, leading to the body being consumed on the first call, making it unusable on the second call.

The Solution: Store the Response

To resolve this issue, you only need to call response.json() once and store its result in a variable. This way, you can log and return the same value with ease.

Updated Code

Here’s how you should update the AccountVerificationAction function:

[[See Video to Reveal this Text or Code Snippet]]

Key Takeaways

Understanding Stream Consumption: Remember, once the response body is consumed (read), it can't be read again. Always fetch it once and store it.

Debug Effectively: Use console logs strategically around your API calls to catch issues promptly.

With these modifications, your Next.js application should now handle the AccountVerificationAction function without throwing the TypeError: Body is unusable, and you'll receive correct responses from your server as expected.

By implementing this fix, you can continue developing your application without the frustration of encountering this specific error. Happy coding!