Next js API Routes

next js에 대해서 공부하다 보니 API Routes에 대해서 알게 되었다.
Rest API 의 request URL을 숨기고 싶어서 방법을 찾아 보게 되었는데

Next js에서 자체 api endpoint 를 만들수 있어서 숨길수 있을까 생각하며 시도해보았다.

일단 API Routes란

pages 디렉토리 안에 api 디렉토리를 만든다.
그리고 원하는 엔드포인트 이름의 파일을 만들면 된다.
타입스크립트를 사용했기 때문에 ts 파일로 넣어줬다.

예시 : pages/api/post.ts
이렇게 만들어 주고 응답값을 리턴하도록 해주면 된다.

예시 파일이다 . api 주소는 https://jsonplaceholder.typicode.com/posts/1 를 사용했는데 열려있는 공개된 키라고 chat gpt 가 알려주었다. 이 url 주소를 숨기기 위해서 api routes 값을 이용하게 되었다.

import type { NextApiRequest, NextApiResponse } from 'next'

export default async function post(
  req: NextApiRequest,
  res: NextApiResponse
) {
  console.log('API 요청이 들어왔습니다.');
  
  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/posts/1');
    if (response.ok) {
    const data = await response.json();
    console.log('API 응답 데이터:', data);
    res.status(200).json(data);
    } else {
    console.log('API 요청이 실패했습니다.');
    res.status(response.status).end();
    }
  } catch (error) {
    console.error('API 요청 중 오류가 발생했습니다.', error);
    res.status(500).end();
  }
}

req값은 http.IncommingMessages의 인스턴스 값이다.
res 값은 res : http.ServerResponse의 인스턴스 값이다.

req.method 값으로 POST , GET 값을 알수 있다.

리턴 값으로는 res.status(200), 400 등등 status 값을 명명해주고 값을 주면 된다.

그냥 백엔드 작업이라 생각되었던 서버와의 소통을 nextjs에서 할수 있는 것이다.

나는 외부 api 를 통신하도록 설정하였는데 자체로 데이터를 만들어서 전달해줄수 있다.

사용

front end 에서는 end point 를 바로 사용할수 있다.
fetch 형태로 사용할때 url 값으로 (‘/api/post’) 라고 설정해주었더니 잘 소통된다.
전체 url주소를 입력해줘야 하나 싶었는데 배포를 해보니 알아서 전체 url로 변경되서 호출이 된다.

결론

나는 외부 api 주소를 접근을 방지하도록 외부 api를 숨기기 위해서 api routes 기능을 사용하려고 하였지만 내가 생성한 api routes 의 url 주소로도 접근이 계속된다.

그래서 해커등이 이 api routes 로도 1000, 10000개 요청을 보낼수 있다는 것이다.
이를 방지하기 위해서 방법을 찾고 있는 도중에 api routes 기능에 대해서 공부하고 정리하게 되었다.