[Next.js] 외부 라이브러리 없이 파일 업로드 구현(No Multer)

1. 이미지 파일을 저장하려고 하는데...

mind-ar 라이브러리를 이용해 증강 현실 콘텐츠를 제공하는 프로젝트를 개발하고 있다. 타깃 이미지를 사용자 단말기의 카메라로 스캔하면 3D 모델 캐릭터가 렌더링 되어야 한다. 타깃 이미지는 사용자 단말기의 카메라로 촬영도 가능하지만 단말기의 저장소에 있는 이미지를 업로드도 가능하도록 구현하고 있다. Node.js에서 파일을 업로드할 때 multer라는 라이브러리를 사용했었다. Next.js 13의 App Router로 프로젝트를 진행하고 있는데 여기에서도 multer를 사용해야지라고 생각하고 시도했는데 Route Handlers를 이용한 API에서는 express의 라우터 설정 방법과 달라 코드의 변경이 필요했다.

 

2. fs.writeFile을 이용해-외부 라이브러리 없이-파일 업로드 구현

Next.js 13 App Router에서 파일 업로드 관련 내용을 검색하다가 "How to upload a file in Next.js 13+ App Directory with No libraries"를 발견했다. fs.writeFile을 이용한 내용이다. 매우 정리가 잘되어 있어서 이 것만 봐도 충분할 것이다!

 

참고 자료
https://ethanmick.com/how-to-upload-a-file-in-next-js-13-app-directory/