VIBECODING 365 / DICTIONARY
Next.js 라우트 핸들러
Next.js Route Handler
DEFINITION
정의
Next.js App Router에서 app/api/.../route.ts 파일로 만드는 서버 측 API 엔드포인트이다. GET, POST 같은 HTTP 메서드별 함수를 export하여 브라우저 요청을 받고, 데이터베이스 조회나 외부 API 호출 뒤 JSON 응답을 반환한다. 바이브 코딩에서 AI가 프론트엔드 화면만 만들고 저장·조회 API를 빠뜨리거나, 반대로 클라이언트 코드에 비밀 값을 넣는 실수를 할 수 있으므로 라우트 핸들러는 '브라우저에 노출하면 안 되는 서버 작업을 담는 안전한 경계'로 이해해야 한다.
ENGLISH
Next.js Route Handler
EXAMPLE
문의 폼 제출 버튼은 /api/contact로 POST 요청을 보내고, route.ts의 POST 함수가 입력값을 검증한 뒤 저장하고 성공 JSON을 돌려주며 실패 시 400 응답으로 사용자에게 수정 안내를 보여준다.
관련
이어서 볼 문서
RELATED TERMS
연관 용어
OpenAI Responses API
OpenAI가 Chat Completions 다음에 내세운 상태형 응답 표면이다. 입력은 input, 출력은 Items이며, previous_response_id로 대화를 잇는다.
security 교차 출처 리소스 공유Cross-Origin Resource Sharing (CORS)
다른 출처 페이지의 스크립트가 이 응답을 읽어도 되는지, 서버가 HTTP 헤더로 브라우저에 알리는 방식이다. 요청이 가는 것과 스크립트가 읽는 것은 다르며, 쿠키를 실을 때는 별표 출처가 허용되지 않는다.
프론트엔드·UI 핫 리로드Hot Reload
코드 변경 시 전체 앱을 재시작하지 않고 변경된 부분만 실시간으로 브라우저/앱에 반영하는 개발 기능이다. Hot Module Replacement(HMR)라고도 불리며, 바이브 코딩에서 핵심적인 피드백 루프를 제공한다. AI가 코드를 수정할 때마다 브라우저에서 즉시 결과를 확인할 수 있으므로, '프롬프트 → 코드 생성 → 즉시 시각적 확인'이라는 빠른 반복 주기가 가능하다. 전통적 개발에서는 코드 수정 → 빌드 → 브라우저 새로고침 → 상태 재설정이라는 지루한 과정을 거쳤지만, 핫 리로드는 앱의 현재 상태(로그인 상태, 입력된 폼 데이터 등)를 유지한 채 변경된 부분만 교체하므로 개발 경험이 극적으로 개선된다. Next.js(React), Vite, Remix 등 현대 웹 프레임워크는 핫 리로드를 기본 제공하며, Bolt.new는 이 기능을 활용하여 AI가 코드를 작성하는 동시에 라이브 프리뷰를 실시간 업데이트한다. React Native에서는 Expo Go를 통해 모바일 기기에서도 핫 리로드가 가능하다.