Next.js에서 413 Payload too Large 에러

🚨 문제상황

1. 로컬호스트에서 파일 업로드를 했을 때 정상적으로 파일이 업로드 되고, S3에까지 성공적으로 파일이 등록되었음을 확인.
2. 그러나 vercel을 통해 배포된 임시 페이지에서 파일 업로드를 확인했을 때 413 Payload too Large 에러가 발생하면서 파일 업로드 자체가 불가능

✏️ 해결

413 Payload too Large라는 에러 말고도 별다른 오류가 확인되지 않았고 자체적으로 파일 사이즈에 대한 검토를 진행했음에도 해당 오류가 발생했기 때문에, 내가 알지 못하는 별도의 문제가 있을 것 이라고 추측했다.

GPT에 물어본 결과, Vercel의 기본 제한(4.5MB 제한) 때문일 수도 있다고 해서 next.config.mjs에서 설정을 변경했다.

/** @type {import('next').NextConfig} */
const nextConfig = {
    experimental: {
        serverActions: {
            bodySizeLimit: '10mb'
        }
    }
}

module.exports = nextConfig

이런 식으로 설정을 수정하여, 서버 액션의 페이로드 제한을 10MB로 설정하였더니 성공적으로 수정이 되었다!