Cách sửa lỗi 413 payload too large trong ứng dụng NextJS

Lỗi này thường xảy ra ở các phiên bản Nextjs mới, 14+. Khi bạn gọi server actions trong app router thì bị giới hạn blob thường nhỏ hơn 4.5MB. Ví dụ, bạn muốn tải lên tệp tin có kích thước lớn hơn thì cần phải cấu lại trong tệp next.config.ts hay .js

Thêm đoạn config sau đây:

  experimental: {
    serverActions: {
      bodySizeLimit: "100mb",
    },
  },

config này sẽ cho phép bạn gọi các server action truyền vào data lớn đến 100MB.

Và khi bạn triển khai lên VPS/Hosting mà vẫn còn gặp lỗi này, đối với Nginx, bạn cần mở file /etc/nginx/nginx.conf và thêm

client_max_body_size 100M;

Điều này sẽ đồng bộ cho cả config nextjs và nginx của bạn.

Sau khi đã thiết lập hãy khởi động lại dịch vụ nginx và app nextjs của bạn.

Chúc các bạn thành công sửa lỗi 413 payload too large!