파일 업로드는 웹 개발에서 자주 사용되는 기능 중 하나입니다. 이번 블로그 포스트에서는 Next.js를 사용하여 파일 업로드를 구현하는 방법을 알아보겠습니다.
1. Multer 설치
Multer는 Node.js에서 파일 업로드를 쉽게 처리할 수 있도록 도와주는 미들웨어 패키지입니다. 다음 명령어를 사용하여 Multer를 설치합니다.
npm install multer
2. 파일 업로드 폼 생성
파일 업로드를 위한 폼을 생성합니다. 예를 들어, 다음과 같은 HTML 폼을 만들 수 있습니다.
<form action="/upload" method="POST" enctype="multipart/form-data">
<input type="file" name="file" />
<button type="submit">파일 업로드</button>
</form>
3. 파일 업로드 처리
Next.js에서 파일 업로드를 처리하기 위해 필요한 API 경로를 만들고, 해당 경로에서 파일을 처리하는 코드를 작성합니다. 예를 들어, /pages/upload.js 파일을 생성하고 다음과 같은 코드를 작성할 수 있습니다.
import multer from 'multer';
const upload = multer({ dest: 'uploads/' });
export default upload.single('file');
export const config = {
api: {
bodyParser: false,
},
};
위의 코드에서 multer를 사용하여 업로드 폴더를 지정하고, upload.single('file') 메서드를 사용하여 한 개의 파일만 업로드할 수 있도록 설정하였습니다. config 객체는 Next.js에게 bodyParser를 사용하지 않도록 지시합니다.
4. 파일 업로드 확인
파일 업로드가 제대로 동작하는지 확인하기 위해, 파일을 업로드하는 기능을 포함한 페이지를 추가합니다. 예를 들어, 다음과 같은 /pages/index.js 파일을 생성하고 코드를 작성할 수 있습니다.
import Link from 'next/link';
export default function Home() {
return (
<div>
<h1>파일 업로드 예제</h1>
<form action="/upload" method="POST" enctype="multipart/form-data">
<input type="file" name="file" />
<button type="submit">파일 업로드</button>
</form>
<Link href="/uploaded-files">
<a>업로드된 파일 보기</a>
</Link>
</div>
);
}
위의 코드에서는 /upload 경로로 파일 업로드를 수행하는 폼이 있으며, Link 컴포넌트를 사용하여 업로드된 파일을 확인할 수 있는 페이지로 이동할 수 있도록 구성되었습니다.
결론
이제 Next.js를 사용하여 파일 업로드를 구현하는 방법을 알게 되었습니다. Multer 패키지를 사용하여 업로드 폴더를 지정하고, 파일 업로드를 처리할 수 있는 API 경로를 만들었습니다. 파일 업로드 기능은 많은 웹 애플리케이션에서 필요한 기능이므로, Next.js로 웹 개발을 할 때 참고해보세요.