nextjs 공식문서 route handlers를 보면 page 라우터를 사용할 때는
api 폴더 아래에 있어야 api에 접근이 가능했는데
app 라우터로 넘어오면서 api dir 아래에 있을 필요는 없다.
(app폴더 안에 route.ts로만 작성하면 된다.)
하지만 명확하게 구분하기 위해 api dir 아래에 route.ts 파일을 생성했다.
그런데 왜 이걸 사용하냐?
이모셔널에는 youtube api와 openai api를 사용하는데 서버 없이 클라이언트 단에서 사용되다보니
네트워크 탭의 요청 url과 요청 헤더에 api key값이 노출이 되버린다.
.env를 사용해서 환경변수로 key값을 숨긴 노력이 무용지물이 되어버렸다.
이걸 방지하기 위해서 찾다보니 나온게 nextjs 서버를 이용한 api route방식이다.
이 방식을 이용하면 간단한 api를 만들 수 있는데
위 파일의 경로는 현재 app dir > api dir > test dir > route.ts 이다.
이렇게 간단한 api를 만들었다면 포스트맨을 이용해서 호출해보자
이렇게 /api/test get을 호출하니 response body에 value: success가 나오고 있다.
이렇게 하니 엔드포인트가 /api/test로 끝나고 이런 방식을 사용하면 원래 노출되었던 youtube key값이 파라미터에 노출되지 않는다.
api라우트를 사용하면 아까전과 다르게 엔드포인트도 /api/analze와 /api/video로 변경되었고
서버에서 api를 실행하기 때문에 클라이언트 단에서 api key값이 노출되지않는다.
당연히 로직은 위와 같이 간단하게 호출되는게 아니라 예외처리도 있고
할당량 초과 이슈에 대응하기 위해 계정을 2개 사용했으며,
할당량 초과에 따라 사용되는 계정이 변경되는 로직도 구성하였다.
댓글