nextjs
CHAPTER 12 / 34
읽기 약 2분
SYNTAX
Route Handler 해부: API 엔드포인트
핵심 개념
app/api/route.ts로 API 엔드포인트를 만듭니다. GET, POST, PUT, DELETE 함수를 export합니다. NextRequest와 NextResponse로 요청/응답을 처리합니다.
코드 분석
ROUTE HANDLER
// app/api/units/route.ts
import { NextRequest, NextResponse } from 'next/server'
// GET /api/units
export async function GET() {
return NextResponse.json(
{ units: ['T-800', 'T-1000'] }
)
}
// POST /api/units
export async function POST(req: NextRequest) {
const body = await req.json()
return NextResponse.json(
{ created: body }, { status: 201 }
)
}AI 프롬프트
🤖 AI에게 잘 물어보는 법 — 모델·전략별 프롬프트
Claude
무료: Sonnet 4.6 / Pro $20/mo: Opus 4.6
이 Next.js 'Route Handler' 코드에서 서버/클라이언트 경계·use client 누락·캐시 무효화 버그를 찾아서 수정해줘.
ChatGPT
무료: GPT-5.5 / Plus $20/mo: GPT-5.5 Pro
'Route Handler'를 활용한 실전 페이지를 App Router + TypeScript + Server Actions로 만들어줘.
Gemini
무료: 2.5 Flash / Pro $19.99/mo: 3.1 Pro
이 Next.js 'Route Handler' 사용 패턴이 빌드 크기와 LCP/INP/CLS에 미치는 영향을 분석하고 최적화 방안을 알려줘.
Grok
무료: Grok 4.1 / SuperGrok $30/mo
Next.js 'Route Handler' vs Remix/Astro/SvelteKit의 동일 기능 구현을 2026년 기준으로 솔직하게 비교해줘.
⭐ 이것만 기억하세요
Route Handler 해부: API 엔드포인트는 이 3가지만 확실히 잡으세요
1.별도 백엔드 서버 없이는 프론트엔드에서 DB 접근이나 외부 API 키 사용이 불가능합니다
2.app/api/route.ts에 GET·POST 함수를 export하면 Next.js가 서버리스 API 엔드포인트로 자동 배포합니다
3.다음 챕터에서 요청을 가로채서 인증·리다이렉트를 처리하는 Middleware를 배웁니다
공유하기
진행도 12 / 34