OPEN HYPER STEP
← 목록으로 (Next.js)
NEXTJS · 30 / 34
nextjs
CHAPTER 30 / 34
읽기 약 2
FUNCTION

Next.js 실전: 파일 업로드


핵심 개념

Route Handler로 파일 업로드를 처리합니다. FormData로 파일을 받고 Vercel Blob이나 S3에 저장합니다.

코드 분석
NEXTJS📋 코드 (17줄)
FILE UPLOAD

// app/api/upload/route.ts
export async function POST(req: NextRequest) {
  const formData = await req.formData()
  const file = formData.get('file') as File
  // 파일 처리
  const bytes = await file.arrayBuffer()
  const buffer = Buffer.from(bytes)
  return NextResponse.json({
    name: file.name,
    size: file.size,
    type: file.type,
  })
}

SELECT FILE

AI 프롬프트
🤖 AI에게 잘 물어보는 법 — 모델·전략별 프롬프트
Claude

무료: Sonnet 4.6 / Pro $20/mo: Opus 4.6

이 Next.js 'Next.js 실전: 파일 업로드' 코드에서
서버/클라이언트 경계·use client 누락·캐시 무효화 버그를
찾아서 수정해줘.
ChatGPT

무료: GPT-5.5 / Plus $20/mo: GPT-5.5 Pro

'Next.js 실전: 파일 업로드'를 활용한 실전 페이지를
App Router + TypeScript + Server Actions로 만들어줘.
Gemini

무료: 2.5 Flash / Pro $19.99/mo: 3.1 Pro

이 Next.js 'Next.js 실전: 파일 업로드' 사용 패턴이
빌드 크기와 LCP/INP/CLS에 미치는 영향을
분석하고 최적화 방안을 알려줘.
Grok

무료: Grok 4.1 / SuperGrok $30/mo

Next.js 'Next.js 실전: 파일 업로드' vs Remix/Astro/SvelteKit의
동일 기능 구현을 2026년 기준으로
솔직하게 비교해줘.

⭐ 이것만 기억하세요
Next.js 실전: 파일 업로드 이 3가지만 확실히 잡으세요
1.대용량 파일을 서버 메모리에 직접 받으면 메모리 초과로 서버가 다운될 수 있습니다
2.Presigned URL로 클라이언트에서 스토리지에 직접 업로드하거나, 스트림 처리로 메모리 사용을 제한합니다
3.다음 챕터에서 이메일 발송 기능을 구현합니다


공유하기
진행도 30 / 34