Page Router (4) - API Routes

2026.09.14 · 1분 읽기 · 조회 0

API Routes

API Routes 는 next 앱에서 API를 구축할 수 있도록 만들어주는 기능이다. 브라우저의 요청을 받아 비즈니스 로직을 수행하는 등의 기능을 할 수 있다.

이미 pages 폴더 내부에는 기본적으로 api 폴더가 있다. 해당 폴더 내부의 파일은 api를 정의하는 파일이 되고, 해당 hello.ts의 경로는 api/hello 가 된다. 브라우저에서 해당 경로를 요청하면 내부의 api가 실행된다.

//hello.ts
export default function handler(
  req: NextApiRequest,
  res: NextApiResponse<Data>,
) {
  res.status(200).json({ name: "John Doe" });
}

해당 코드를 보면 req 요청과 res 응답, 그리고 실제 반환해주는 상태코드와 json코드가 들어있다. 실제로 해당 경로로 요청을 날려보면

응답이 출력된다.

현재 시간을 반환해주는 api를 하나 만들어보자. 경로는 /api/time 으로 지정한다.

import { NextApiRequest, NextApiResponse } from "next";
 
export default function handler(req: NextApiRequest, res: NextApiResponse) {
    
}

기본 형식을 지정해준다.

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

json 값으로 현재 시간을 보내준다. api/time 으로 접속하면
json 값이 잘 내려온다.

댓글

giscus로 동작하며 GitHub Discussions에 저장됩니다.

관련 글