Getting 413 (Request Entity Too Large) on server action

[madiha-right]

Summary

Hello devs, I really need some help here. It would be glad if you guys help me.

• Next.js: 14.0.4
• Hosting service: AWS Amplify

Sending image to server using server action works fine with smaller images. The 413 error occurs when I request to send an image that is bigger than 5mb and it seems like the image size is bigger than the body size limit.
Since it is just a server action, I don't think below config is working(as far as I know below code is only for the page route.ts).

export const config = {
  api: {
    bodyParser: {
      sizeLimit: '20mb',
    },
  },
};

I tried to increase bodySizeLimit to "20mb" in my next.config.js but it does not seem to increase the body size limit as expected. Any ideas to reduce this error?

Additional information

next.confis.js

const nextConfig = {
  experimental: {
    serverActions: {
      bodySizeLimit: "20mb",
    },
  },
};

Example

No response

[salahqasm1]

did you find the solution?

[maxinfopol]

any solution ?

[guiqis]

For anyone reading this, I was with this problem for 1 month and turns out it was nginx settings and not NextJS. Just added client_max_body_size config and it worked!

[justinianoleo]

Hi. My project is deployed in Vercel and i'm getting the same error. 413 PAYLOAD TOO LARGE ¿Any idea how to fox it?

[DevPro15]

Hi @justinianoleo,
Did you got the solution for it?

[medaminefh]

Hi there, it seems that vercel sets a body limit (4.5MB) for the serverless functions check this

If anyone has other solution please share it here

[ZaynSaleem]

Hi, I'm getting the same error "Request entity too large" Does anyone know how to fix this issue?
PS: Project is deployed on vercel and I'm passing video of size 30mb in payload.

[medaminefh]

@ZaynSaleem Please refer to the above comment

[ezeparziale]

https://vercel.com/guides/how-to-bypass-vercel-body-size-limit-serverless-functions

[aimahusnain]

Hello, I'm running into the same error message: 413 Payload Too Large.

My site is dedicated to background removal and uses FastAPI with Python, Next.js, and TypeScript. For the background removal process, I rely on rembg.

Everything works fine locally, but after deploying to Vercel, it doesn't run properly when the API is called. When I check the network activity, I see the Payload Too Large error.

[aleksa-codes]

I am facing this right now sending a base64 image, did you have luck fixing it? I had already searched everywhere for the answer.

[BertVanHeckeCertifisc]

+1

[AnkitC07]

any solution, by setting this

const nextConfig = {
  experimental: {
    serverActions: {
      bodySizeLimit: "20mb",
    },
  },
};

doesnt seem to work in my app router.

[ernanibmurtinho]

It looks like a client-side problem, so I guess that it won't work just changing the settings
It's a serverless limitation

Try following this guide:

https://vercel.com/docs/storage/vercel-blob/client-upload

Did you find another solution?

[omardeangelis]

+1

[lukasulbing]

+1

[BertVanHeckeCertifisc]

I found a solution: convert your server action into an API route and use it that way. This approach will resolve the issue.

[lukasulbing]

I am downloading a single video file

[omardeangelis]

Yes, server actions are API Routes with an hash code, nothing more. If you can get the hash of the server action you can curl your server actions. If u export them they are public endpoints

[lukasulbing]

In the response headers, there's one called X-Cache with the value Error from cloudfront and another one x-amplify-status with the value true. Therefore, I think it must be some limitation of Amplify as this service is using cloudfront behind the scenes

[AhmadHumayun]

Hi @lukasulbing, i am facing the same issue, i added 20 images in src folder all below 1mb except one which is 1.5mb size, my deployment on amplify have no issue but when i go to url i get 413 and same Error from cloudfront, did you find solution for it?

[lukasulbing]

@AhmadHumayun The problem here is that Amplify (Cloudfront) limits its request size to 1MB. You have just put the image file into the src folder and therefore Amplify is trying to directly serve it to the client, but it's simply too big. You have two options here: Either make sure the image is smaller (which it definitely should be when laying in src folder) or implement some sort of processor/middleware software that takes care of splitting up the image into smaller chunks and sending it that way to the client (you could use HTTP range requests for that).

I was able to solve my problem by implementing range requests on the backend side of my application to basically stream the media file (in my case a long video) to the client side. Hope this helps!

[gride29]

If anybody is using Supabase Storage try using createClient in client version like this:

import { createClient } from '@/utils/supabase/client'

Then you can upload your files directly in the client side code instead of using api routes / server actions.

In summary, just move your logic to client side code instead of passing formData to api route and it should work.

You can also try other options: https://vercel.com/docs/errors/FUNCTION_PAYLOAD_TOO_LARGE

[Karthickeyyan]

Hi All,

I might have a simple solution for this. Let's say the Next.js application is deployed on either Azure Static Web Apps or Amplify; both are serverless architectures.

I’ve also tried all these options, but none of them worked for me. You can check out this blog to reach a conclusion.

https://medium.com/@karthickeyyan.perumalsamy/effective-strategies-for-handling-large-payloads-in-next-js-48206f0450bf

[ernanibmurtinho]

Hi there, if your problem is just the upload, try this:

https://vercel.com/docs/storage/vercel-blob/client-upload

It worked for me.

But now, I'm figuring out a different problem, it's during file fetch.
After my upload, I need to fetch the content and write it to postgres ( it could be any DB, but it's already setup )
What I've done:

1. Change my upload to the client side, like the link
2. I tried to use the onUploadCompleted of handleupload function, but I don't know why, I can't enter this loop, even if I set the parameters ( it probably would solve my problem during fetch )
3. So now, my file uploads with success, but when I need to retrieve the information ( if it's bigger than 4.5 MB, I got the status code 413 payload too large )
4. I'm using WebPDFLoader as the loader, but the problem occurs during the fetch time

Any suggestions? Maybe I don't know how to make the onUploadCompleted step work properly.

If your problem is just with the upload, this will help you figure out this issue.

[yosapps]

any solution?

[ernanibmurtinho]

Hi @yosapps
I fixed the issue with the upload
But during the fetch, I receive the same error
So I don't know how to solve the issue with the download, only the upload.

[vamsibammid]

Consider it if it was a file with less than 1MB only then it was working properly without that we can not able to upload images
if it is like 1.01 something like this also it was showing the 413 error while the issue is fixed from be also same error it was showing

[neo87cs]

I think is not understable to have a server action that is getting a 413 but throw no error in the code, how should a dev manage it? Always have to return data to check for undefined to understand if server action failed? In our case the upload server action got 413 but throwed no errors (it was not reaching nextjs server as nginx was whining first) with next 14.2.26

[koakuma-chan]

Another day another dumb next.js issue