Next.js 서버 액션을 활용한 파일 업로드 및 다운로드 기능 구현

 

• 서버 액션(Server Actions)으로 파일을 업로드하고 다운로드하는 방법
• Next.js의 fs 모듈을 활용하여 로컬 파일 저장 및 제공
• 보안 고려 사항 및 실무 적용 방법

app/actions.js (파일 업로드 및 다운로드 처리)

'use server';

import fs from 'fs';
import path from 'path';

const UPLOAD_DIR = path.join(process.cwd(), 'public/uploads');

if (!fs.existsSync(UPLOAD_DIR)) {
  fs.mkdirSync(UPLOAD_DIR, { recursive: true });
}

export async function uploadFile(formData) {
  const file = formData.get('file');
  if (!file) return { error: '파일이 없습니다.' };

  const bytes = await file.arrayBuffer();
  const buffer = Buffer.from(bytes);
  const filePath = path.join(UPLOAD_DIR, file.name);

  fs.writeFileSync(filePath, buffer);

  return { url: `/uploads/${file.name}` };
}

export async function getFiles() {
  return fs.readdirSync(UPLOAD_DIR).map((file) => ({
    name: file,
    url: `/uploads/${file}`,
  }));
}

 

app/page.js (파일 업로드 및 다운로드 UI)

import { uploadFile, getFiles } from './actions';
import { useEffect, useState } from 'react';

export default function Home() {
  const [files, setFiles] = useState([]);

  useEffect(() => {
    async function fetchFiles() {
      setFiles(await getFiles());
    }
    fetchFiles();
  }, []);

  async function handleUpload(event) {
    event.preventDefault();
    const formData = new FormData(event.target);
    await uploadFile(formData);
    setFiles(await getFiles());
  }

  return (
    <div>
      <h1>파일 업로드 및 다운로드</h1>
      <form onSubmit={handleUpload}>
        <input type="file" name="file" required />
        <button type="submit">업로드</button>
      </form>
      <ul>
        {files.map((file) => (
          <li key={file.name}>
            <a href={file.url} download>{file.name}</a>
          </li>
        ))}
      </ul>
    </div>
  );
}

 

 

• Next.js 서버 액션을 활용하여 파일 업로드와 다운로드를 간편하게 처리 가능
• 보안 강화를 위해 인증 및 파일 확장자 제한 등의 추가 기능을 고려