[알토르] 8주차 과제 : Next.js에서 API 만들기

과제 : Next.js에서 API 만드는 법 찾고

파이썬(Flask) → Next.js API 마이그레이션

 

목표 : 저번주 진행했던 EC2 + Flask 분리 구조에서 Next.js 단일로 통합

-> Vercel 환경에서의 운영 효율성 확보

---

쉽게 이해하려면,

이전 구조 (Flask + EC2)

프론트엔드 = 내 집 (Vercel)

백엔드 = 옆 동네 친구 집 (EC2)

// 데이터 필요하면 친구 집에 전화해서 받아옴

 

새 구조 (Next.js 통합)

내 집에 방 하나 더 만들어서 거기서 다 처리

친구 집 안 불러도 됨 → EC2 필요 없음

-> 즉 "따로 돌던 서버를 Next.js 안으로 집어넣는 작업"

(Next.js는 프론트엔드 + 백엔드 둘 다 된다)

---

 

1. Next.js에서 API 만드는 법 (App Router)

Next.js는 app/api/ 폴더 안에 route.ts 파일을 만들면 해당 경로가 자동으로 API 엔드포인트가 된다

 

작성규칙

route.ts 안에서 HTTP 메서드명과 같은 함수를 export → 해당 메서드 요청 처리

한 파일에 GET, POST, PUT, DELETE 같이 선언 가능(반드시 대문자)

응답은 NextResponse.json()으로 반환

---

2. Flask → Next.js App Router 마이그레이션 절차

1. app/api/ 폴더 만들기 + route 파일 생성
2. Flask 엔드포인트 하나 고르기 (간단한 것부터)
3. app/api/경로/route.ts로 옮기기
4. 프론트 fetch URL 수정 (절대경로 → /api/...)
5. 로컬 테스트 (npm run dev + Network 탭 확인)
6. ~~반복 (다른 엔드포인트 있으면)~~
7. 환경변수 등록 + Vercel 배포 + 프로덕션 검증
8. 안정 확인 후 EC2/DNS/불필요 환경변수 정리

---

app/api/ 폴더 만들기

Next.js는 "이 폴더 안에 있는 파일은 API로 취급할게"라는 규칙 있음.

약속된 장소에 짐을 놓는 느낌. // 폴더 구조 자체가 경로

mkdir -p app/api/chat
touch app/api/chat/route.ts

 

간단한 엔드포인트 하나 고르기(스킵)

// 간단한 엔드포인트 하나 고르기" = 마이그레이션을 작게 시작해서 감 잡은 뒤 확장하라는 전략

// 여러개일때만 의미 있고, chat 엔드포인트 하나 뿐이라 단계 패스 

 

app/api/경로/route.ts로 옮기기

Flask 코드(Python)를 Next.js가 못 읽으니까 JavaScript/TypeScript로 다시 쓰는 것

// 같은 로직을 언어만 바꾸는 작업

 

기존 `backend/` 폴더의 Flask 파일을 참고용으로 옆에 띄워두고,

같은 로직을 TypeScript로 다시 작성해서 `app/api/chat/route.ts`에 저장.

Flask 파일을 삭제하는 게 아니라 번역하는 것. 원본은 검증이 끝날 때까지 그대로 둔다.

(클로드한테 요청해서 작업했지만 원래 작업 방식은 위와 같다.)

 

 

프론트 fetch URL 수정

(중요) 이전엔 백엔드가 다른 집에 있었으니 주소를 전부 적어야 했음

하지만 이제 백엔드가 같은 집 안에 있으니까 주소 다 쓸 필요 없음

 

fetch('https://api.yourdomain.com/chat') -> fetch('/api/chat')

 

로컬테스트로 내 컴퓨터에서 되는지 먼저 확인 후

Vercel 배포(Vercel에 키번호 따로 등록)

 

터미널에서: npm run dev 

그 다음 브라우저에서 localhost:3000 열고 채팅창에 메시지 보내기

제대로 됐는지 확인하려면 브라우저 개발자도구 → Network 탭 열고

메시지 보냈을 때: /api/chat 요청이 뜨는지 Status 200인지 Response 탭에 reply 값 있는지 확인

(참고 : 로컬 .env.local 파일에 GEMINI_API_KEY 있어야 해요. 없으면 500 에러남)

 

EC2/DNS 정리

EC2 안씀(켜두면 AWS 요금 계속 나감)

api.yourdomain.com 주소도 가리킬 곳이 없으니 DNS에서 지우기

 

EC2 Terminate 했고(Elastic IP 해제 - 안 그럼 요금 나감)

가비아 DNS 설정에서 API 레코드 삭제

---

로컬테스트 확인 후 git 배포, 웹브라우저에서도 확인

배포하기전에 터미널에서 Ctrl + C 누르면 서버 종료되고

터미널 다시 입력 가능

 

API 요청 성공 / 응답 데이터 도착 / UI에 답변 표시

(모두 정상 확인 -> 끝)

---

결과

- EC2 인스턴스 종료 → AWS 월 요금 절감

- 배포 파이프라인 단일화 (git push → Vercel 자동 배포)

- CORS 설정 불필요 (같은 도메인)

- DNS 관리 포인트 감소 (api 서브도메인 제거)

- 로컬/프로덕션 코드 동일 (상대경로 /api/chat)

 

// CORS(Cross-Origin Resource Sharing)

다른 출처 간 자원 공유 허용하는 브라우저 보안 규칙

이전에 이런 식으로 허용했었음

from flask_cors import CORS CORS(app, origins=['https://yourdomain.com'])

 

이제 프론트, 백엔드가 같은 출저라 CORS 설정 필요 없음

(CORS 에러는 프론트엔드 개발에서 가장 흔한 에러 중 하나라고 함)

 

// 주소를 /api/chat처럼 상대경로로 쓰니까, 브라우저가 알아서 현재 도메인을 앞에 붙여줌.

그래서 로컬이든 프로덕션이든 같은 코드가 돈다.