처음 만난 Next.js 문서
5.1
Pages Router의 API Routes
먼저 기존 Next.js 13버전까지 주로 사용하던 Pages Router의 API Routes에 대해서 알아보도록 하겠습니다. API Routes는 기존 Pages Router에서 Public API를 만들 수 있도록 해주는 기능입니다.
API Routes를 사용하는 방법은 pages 폴더 내에 api라는 이름의 폴더를 만들고, 그 안에 각 경로에 따른 API 코드를 아래 예시 코드와 같이 구현하기만 하면 됩니다.
// pages/api/hello.ts
import type { NextApiRequest, NextApiResponse } from 'next';
type ResponseData = {
message: string;
};
export default function handler(
req: NextApiRequest,
res: NextApiResponse<ResponseData>
) {
res.status(200).json({ message: 'Hello, API Routes!' });
}
이렇게 작성된 pages/api 폴더 내의 모든 파일은 /api/* 경로에 매핑되며 페이지가 아닌 API 엔드포인트로 처리됩니다. 아래 예시는 pages/api 폴더 내의 파일과 실제 매핑되는 경로를 나타낸 것입니다.
pages/api/signin.ts ➔ https://<your_domain>/api/signinpages/api/posts/[postId]/index.ts ➔ https://<your_domain>/api/posts/1pages/api/posts/[postId]/comments.ts ➔ https://<your_domain>/api/posts/1/comments
NOTE. API Routes와 번들 크기
API Routes로 작성한 코드는 서버측 전용 번들이기 때문에 클라이언트측의 번들 크기를 늘리지 않습니다.
마지막 업데이트: 2025년 10월 24일 02시 16분
이 문서의 저작권은 이인제(소플)에 있습니다. 무단 전재와 무단 복제를 금합니다.
On this page