2.5. API Routes

1. API Routes

• 넥스트에서 API를 구축할 수 있게 해주는 기능입니다.
• 마치 백엔드 API 서버가 하는 일과 동일하게 브라우저가 데이터베이스에서 데이터를 가져올 수 있습니다.
• API Routes를 학습하기 위해 넥스트 앱을 가동해봅니다.

npm run dev

2. pages/api

• pages/api 폴더는 넥스트 프로젝트를 생성할 때 자동으로 만들어져 있습니다.
• pages/api/hello.ts는 API Routes로서 API 응답을 정의하는 파일입니다.
• req는 요청, res는 응답입니다.

localhost:3000/api/hello

• 페이지를 확인해보면 현재 hello.ts에 작성된 json 파일이 나타나는 것을 볼 수 있습니다.

3. 새로운 API 생성

• 이제 기존 코드(hello) 말고, 나만의 API를 만들어봅니다.
• 현재 시간을 반환하는 API를 만들어보겠습니다.
• pages/api/time.ts를 생성하고 아래와 같이 작성합니다.

import type { NextApiRequest, NextApiResponse } from "next";

export default function handler(
    req: NextApiRequest,
    res: NextApiResponse
) {
    const date = new Date();
    res.json({time: date.toLocaleString()});
}

• 이제 time이라는 API가 호출되면 → 핸들러 함수가 실행되고 → 이 함수에서는 date라는 새로운 객체를 만들고 → response의 응답 값으로 json 객체를 사용하게 됩니다.

4. API Routes의 활용도

• 사실 이 API Routes는 자주 쓰이는 기능은 아닙니다.
• 따라서 이런 게 있다는 것만 가볍게 알고 넘어가면 되겠습니다.