bodySizeLimit 설정

https://nextjs.org/docs/app/api-reference/config/next-config-js/serverActions#bodysizelimit

 

문제 분석

server action formData로 file을 보내려고 하는데, 아래와 같은 에러가 났다. 브라우저 상에서는 fetch 에러만 나서 한참을 헤맸는데, 터미널 로그를 보니 빠르게 원인을 찾을 수 있었다. 413 에러는 Payload Too Large 상태를 의미하는 것으로 요청 데이터가 서버에서 제한해 놓은 크기보다 크다는 것을 말한다.

{
  statusCode: 413
}
 ⨯ uncaughtException:  [Error: Body exceeded 1 MB limit. To configure the body size limit for Server Actions, see: <https://nextjs.org/docs/app/api-reference/next-config-js/serverActions#bodysizelimit>]

 

해결 방법

 

Next.js는 server action으로 보내지는 request body의 크기를 1MB로 제한한다. (자원의 효율적 이용과 DDoS 공격을 방지하고자) 그래서 아래처럼 설정을 변경해주어야 한다.

import type { NextConfig } from 'next';

const nextConfig: NextConfig = {
    experimental: {
        serverActions: {
            bodySizeLimit: '2mb',
        },
    },
};

export default nextConfig;