[NextJS AppRouter] 초간단 API Mocking 하기(with Route Handlers)

.with Route Handlers
목표 : (구) API Routes라고 불리는 현 Route Handler를 활용해서 API를 Mocking해보자
Framework : NextJS 13(App Router)

여기서 사용 할 예시 API는 POST api/v1/users/login 로그인 기능이다.
돌아가는 지 확인만 해 볼 예정으로 간단하게만 mocking 해 볼 예정

---

1. app directory에 api 경로 생성

우선, API 명세서의 엔드포인트에 맞게 경로를 생성한다.
app directory 내부에 다음과 같이 생성한다.

app
 ┗ api 
 ┃ ┗ v1
 ┃ ┃ ┗ users
 ┃ ┃ ┃ ┣ login  
 ┃ ┃ ┃ ┃ ┗ route.ts

만약 엔트포인트 끝에 id와 같은 특정 값이 들어오는 경우

• route.ts -> [id].ts 로 변경한다

2. route.ts 파일 작성

route.ts 에 mocking 한 데이터와 로직을 작성한다.
[[Route Handlers]] 활용하여 로직을 작성하였다.

• 로직은 API 명세서에 맞게 작성하면 된다.

// app/api/v1/users/login/route.ts

export async function POST(request: Request) {
  const { user_email, password } = await request.json()

  // 실제 데이터베이스 로직 대신 mock 데이터를 사용합니다.
  const mockUsers = [
    {
      user_email: 'existing@example.com',
      password: 'password123',
      user_uid: 'adadsdasdasd33',
    },
  ]

  const user = mockUsers.find((u) => u.user_email === user_email && u.password === password)

  if (!user) {
    return new Response(
      JSON.stringify({
        message: '유저 등록이 안돼있음.',
        result: null,
      }),
      {
        status: 202,
        headers: {
          'Content-Type': 'application/json;charset=UTF-8',
        },
      },
    )
  }

  // 유저를 찾았을 경우 로그인 성공 메시지를 반환합니다.
  return new Response(
    JSON.stringify({
      message: '로그인 성공',
      result: {
        user_uid: user.user_uid,
        // 필요한 다른 데이터도 이곳에 추가할 수 있습니다.
      },
    }),
    {
      status: 200,
      headers: {
        'Content-Type': 'application/json;charset=UTF-8',
      },
    },
  )
}

3. Postman을 활용해서 API Mocking 확인해보기

이제, Postman을 활용하여 mocking이 정상적으로 처리되는 지 확인해보자

1. POST http://localhost:3000/api/v1/users/login 설정하기
   • 위 URL은 프로젝트, API에 따라 유동적으로 입력 할 것
2. Body -> raw -> JSON 선택하기
3. 데이터 입력하기
   • 이 데이터 또한 API 명세에 맞게, 작성한 Mock data에 따라 적절하게 입력해볼 것

{
  "user_email": "existing@example.com",
  "password": "password123"
}

4. 결과 확인하기

{
    "message": "로그인 성공",
    "result": {
        "user_uid": "adadsdasdasd33"
    }
}

5. 이제, Mocking을 활용해서 병렬적으로 개발해보자!

---

References

https://nextjs.org/docs/app/building-your-application/routing/route-handlers