Next.js File upload Server action 413 문제 해결 방법에 대해 알아보겠습니다.
Next.js File upload Server action 413 문제 개요
Next.js에서 Server Action 기능을 사용하다 보면 파일 업로드/다운로드 기능을 개발할 때가 있습니다.
이때, 4mb 이상의 용량을 업로드 하는 경우가 종종 발생하는데요.
분명 설정을 한 적이 없지만 http 413 Content Too Large 코드(설명) 가 발생합니다.
Page router에서 하듯 route.ts 파일 상단에 config를 다음과 같이 설정해봤습니다. (사실 app router에는 해당 config 관련 페이지가 없더라구요)
export const config = {
api: {
bodyParser: {
sizeLimit: '20mb',
},
},
};설정하면 다음과 같은 에러가 나타납니다.
당연합니다. 해당 해결 방법은 Page router의 해결 방법이지 App router의 해결 방법은 아니니까요.
App router에서 해결할 방법인 next.config.js 파일을 건드려봅니다.
const nextConfig = {
// reactStrictMode: false, // development only
experimental: {
serverActions: {
bodySizeLimit: "100mb",
},
},
}하지만 실제 적용해 보아도 파일 업로드 시 HTTP 413 문제가 발생할 뿐 해결되지 않았습니다.
분명 설정을 다 했는데요. 왜 그럴까요?
Next.js App router Server action 413 문제 원인
여러 원인이 있다 생각하고 가능성을 열고 다시 찾아봤던 링크를 다시 찾아봤습니다.
그러던 도중 Next.js Github 이슈 탐색 중 글에서(링크) 이런 댓글을 발견했습니다.
바로 본인과 같이 Nginx 서버를 사용하고 있는 사용자가 한 말이었습니다.
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!
사실 원인은 Nginx였다는 말.
본인도 Nginx 서버를 사용하고 있었기에 적용해 보았더니 바로 해결이 되었습니다.
사실 원인은 그랬습니다.
Nginx는 Default 값으로 client_max_body_size 가 1mb로 세팅되어 있습니다. (링크)
결국 Next.js App router Server action 413 문제 해결 은 Nginx의 기본 설정에 대해 조금 더 알아내고 변경한 뒤, Next.js의 App router 설정을 next.config.js 파일에 적용한 것으로 마무리 되었습니다.