인프런 "한 입 크기로 잘라먹는 Next.js" 수강

API Routes

Next.js에서는 별도의 백엔드 서버 없이도 간단한 API 엔드포인트를 만들 수 있다. pages/api 폴더 하위에 파일을 만들면, 파일 이름이 곧 API 경로가 된다.

예) pages/api/hello.ts → /api/hello

API Routes는 서버 사이드에서 실행된다. 덕분에 브라우저에 노출되지 않으며, DB 접근/비밀키 사용/외부 API 호출 등의 서버 로직을 넣기에 적합하다!

가장 기본 예제: /api/hello

// pages/api/hello.ts
// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
import type { NextApiRequest, NextApiResponse } from "next";

type Data = { name: string };

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

• handler 함수가 요청을 받아 응답을 보낸다.
• res.status(200).json(...) 처럼 상태 코드와 JSON 응답을 보낼 수 있다.

⏱️ 간단한 API 추가: /api/time

// pages/api/time.ts
import type { NextApiRequest, NextApiResponse } from "next";

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

브라우저에서 http://localhost:3000/api/time으로 접속하면 날짜가 JSON으로 반환된다.

🧭 요청 메서드 분기 (GET/POST 등)

하나의 파일 안에서 HTTP 메서드별로 분기해 다양한 동작을 구현할 수 있다.

// pages/api/users.ts
import type { NextApiRequest, NextApiResponse } from "next";

export default function handler(req: NextApiRequest, res: NextApiResponse) {
  if (req.method === "GET") {
    return res.status(200).json({ users: ["alice", "bob"] });
  }
  if (req.method === "POST") {
    // req.body 사용 가능 (예: JSON 파싱)
    return res.status(201).json({ ok: true });
  }
  res.setHeader("Allow", ["GET", "POST"]);
  return res.status(405).end("Method Not Allowed");
}