nextjs api기능으로 목업api만들기

프론트엔드에서 신규 기능을 개발하다 보면 목업 데이터를 만들어 사용하곤 했다. 근데 react-query같이 서버상태관리 라이브러리를 붙이는 상황에선 목업 데이터를 사용하기 좀 번거롭다.

이전 mejai 프로젝트에선 친절한 백엔드팀원이 목업 api를 만들어 주어 아주 편하게 사용했지만, 이는 팀원이 일을 두번 하게 되는 방법이었다. 이를 해결해 보자.

 

next.js는 자체 서버에서 api를 관리할 수 있다. api를 만들고 해당 엔드포인트로 요청을 보내면 next.js서버에서 서버리스로 핸들러가 호출되어 작동한다.

핸들러를 만드는 방법 또한 매우 간단하다.

1. API 라우트 파일 생성: 프로젝트의 pages/api 폴더 안에 새 파일을 생성한다. 예를 들어, user.js라는 이름으로 파일을 만든다.
2. 목업 데이터 리턴: 이 파일 안에 다음과 같은 코드를 작성하여 간단한 JSON 데이터를 리턴한다.

// pages/api/user.js

export default function handler(req, res) {
  // 목업 데이터
  const user = {
    name: "donghyk2",
    email: "donghyun1998@naver.com"
  };

  // 200 상태 코드와 함께 목업 데이터를 JSON 형태로 리턴
  res.status(200).json(user);
}

1. API 테스트: 이제 이 API는 http://localhost:3000/api/user로 접근할 때, 설정한 목업 데이터를 JSON 형태로 리턴한다. 개발 중에는 Postman이나 브라우저를 통해 직접 접속하여 테스트 가능

만든 목업 api를 환경변수로 묶어서 나중에 진짜 api가 완성되었을 시 옮겨주기만 하면 된다.

서버를 안 올리는 react의 경우엔 msw라는 라이브러리를 사용한다고 한다.