Next.js Server Action 큰 용량 이미지 업로드하기 (413 Payload Too Large)

Next.js로 웹 애플리케이션을 개발하다 보면, 대용량 이미지를 업로드해야 하는 상황이 종종 생깁니다. 그러나 기본 설정 그대로라면 용량 제한(body size limit)에 걸려 업로드가 실패할 수 있습니다. 문제를 어떻게 해결하는지, Next.js 13+ 버전에서 Server Actions 설정을 활용해 Body Size Limit(요청 바디 제한)를 늘리는 방법을 설명 드리겠습니다.

 

next.config.js 수정

아래 예시는 Server Actions에 대한 Body Size Limit를 30MB로 설정하는 코드입니다. next.config.js 파일에 다음과 같은 구문을 추가하면 됩니다. 물론 30MB를 50MB로 변경하면 50MB 설정한다는 뜻이됩니다.

/** @type {import('next').NextConfig} */
const nextConfig = {
    images: {
        domains: ['gg.cloudfront.net'],
    },
    // Server Actions body size 제한을 30MB로 설정
    experimental: {
        serverActions: {
            bodySizeLimit: '30mb'
        }
    },
}
module.exports = nextConfig

적용후테스트방식

1. 큰 용량 이미지 업로드 페이지 만들기

   • 간단한 파일 입력(<input type="file" />)을 통해 20MB ~ 30MB 이상의 이미지를 테스트 업로드해보기.

   • 에러 발생 여부, 업로드 속도, 그리고 업로드 성공 시 서버 로그를 모니터링.

2. 콘솔 확인

   • Next.js 서버(혹은 Vercel 로그)에서 body parser 관련 에러가 발생하지 않는지 확인.

   • 업로드가 정상 처리되면, 이미지가 서버/스토리지에 올라갔는지 확인

 

결론

Next.js는 편리한 Image Optimization 기능과 Server Actions를 제공하지만, 기본 설정에서 바디 사이즈 제한이 있을 수 있어 큰 이미지 업로드에 실패할 때가 있습니다. 따라서 용량이 큰 이미지 또는 기타 파일을 첨부 할 경우 설정 변경을 통해 쉽게 해결할 수 있습니다.

• 30MB 이하의 이미지가 대부분이라면 bodySizeLimit: '30mb' 정도면 무난

• 더 큰 파일이 잦다면, CDN 직업로드나 S3 직업로드 등으로 확장 가능합니다.

보다 안정적으로 서비스를 운영하기 위해, 단순히 용량 제한만 풀 것이 아니라 트래픽/스토리지 비용, 보안 정책도 함께 검토해보시길 권장드립니다.