nextjs protocol_error ai_generated true

Error: Server Actions require the request body to be parsed as FormData or JSON. Received unexpected content type.

ID: nextjs/server-action-body-parsed-json-error

Also available as: JSON · Markdown · 中文
85%Fix Rate
85%Confidence
1Evidence
2024-05-15First Seen

Version Compatibility

VersionStatusIntroducedDeprecatedNotes
14.2.0 active — — —
14.2.1 active — — —
15.0.0 active — — —
15.1.0 active — — —

Root Cause

Server Actions in Next.js expect the client to send requests with Content-Type application/x-www-form-urlencoded or multipart/form-data (for form submissions) or application/json (for programmatic calls). An unsupported content type (e.g., text/plain) causes parsing failure.

generic

中文

Next.js 中的服务器操作期望客户端发送带有 Content-Type application/x-www-form-urlencoded 或 multipart/form-data（用于表单提交）或 application/json（用于编程调用）的请求。不支持的内容类型（例如 text/plain）会导致解析失败。

Official Documentation

https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions-and-mutations#behavior

Workarounds

  1. 90% success Ensure client-side form submissions use the standard HTML form element or the 'useFormState' hook, which automatically sends the correct content type. For programmatic calls, use 'new FormData(formElement)' or pass a plain object and set Content-Type: application/json. 
    Ensure client-side form submissions use the standard HTML form element or the 'useFormState' hook, which automatically sends the correct content type. For programmatic calls, use 'new FormData(formElement)' or pass a plain object and set Content-Type: application/json.
  2. 85% success If using fetch directly, construct the body as FormData: const formData = new FormData(); formData.append('key', value); await fetch('/action', { method: 'POST', body: formData }); 
    If using fetch directly, construct the body as FormData: const formData = new FormData(); formData.append('key', value); await fetch('/action', { method: 'POST', body: formData });

中文步骤

  1. Ensure client-side form submissions use the standard HTML form element or the 'useFormState' hook, which automatically sends the correct content type. For programmatic calls, use 'new FormData(formElement)' or pass a plain object and set Content-Type: application/json.
  2. If using fetch directly, construct the body as FormData: const formData = new FormData(); formData.append('key', value); await fetch('/action', { method: 'POST', body: formData });

Dead Ends

Common approaches that don't work:

  1. Adding 'Content-Type: multipart/form-data' header manually in JavaScript fetch calls without properly encoding the body 70% fail

    The server still receives the body as a string, not as multipart parts. The content type must match the actual encoding.

  2. Setting 'bodyParser: false' in API route configuration for Server Actions 90% fail

    Server Actions do not use the API route body parser; they have their own parsing logic. Disabling it has no effect.

  3. Using JSON.stringify on FormData before sending 95% fail

    FormData is not a plain object; JSON.stringify will return an empty object. The server expects actual FormData entries.