Next.js의 API 페이지 기능 (API Router)

Next.js의 **API Routes (API 페이지 기능)**는 Next.js 안에서 간단하게 백엔드 API 서버 역할을 할 수 있도록 해주는 기능입니다.

---

✅ 간단 요약

Next.js의 API Route = Express 없이 만드는 간단한 서버 핸들러

• 별도로 Express, Koa 등을 쓰지 않아도 됨.
• Next.js 프로젝트 안에서 app/api/*** 폴더에 파일을 만들면 해당 파일이 자동으로 API Endpoint가 됨.
• 클라이언트 측에서 fetch('/api/hello') 식으로 호출 가능.
  

  ---

  📁 디렉토리 구조 예시

• app/
    api/
      hello/
        route.ts

• ---

  📄 app/api/hello/route.ts

  import { NextResponse } from 'next/server';
  import type { NextRequest } from 'next/server';
  
  export async function GET(req: NextRequest) {
    return NextResponse.json({ message: 'Hello from API!' });
  }

• 이 코드는 브라우저에서 /api/hello로 GET 요청을 보냈을 때 JSON 응답을 줍니다.

  ---

  ✅ App Router API Routes 특징
• 특징설명

  라우팅 방식

  app/api/[route]/route.ts 파일로 API 생성

  HTTP 메서드별 함수 지원

  GET, POST, PUT, DELETE 등 직접 선언 가능

  서버 전용 코드

  이 코드들은 클라이언트에 포함되지 않음

  NextRequest, NextResponse 사용

  Express 스타일 대신 Next.js 전용 API 사용

  ---

  ✅ 여러 메서드 지원 예시

• export async function GET(req: NextRequest) {
    return NextResponse.json({ method: 'GET' });
  }
  
  export async function POST(req: NextRequest) {
    const data = await req.json();
    return NextResponse.json({ received: data });
  }

  ---

  ✅ 주요 차이점 (Pages Router vs App Router)
• 항목 Pages Router App Router

  디렉토리	pages/api/...	app/api/.../route.ts
  요청 객체	NextApiRequest	NextRequest
  응답 객체	NextApiResponse	NextResponse
  메서드 방식	export default 핸들러	export function GET, POST 등 명시적 메서드

  ---

  ✅ 활용 예시
  • 클라이언트에서 fetch('/api/hello')
  • 폼 전송 처리
  • DB 접근 (예: Prisma, MongoDB)
  • 토큰 인증
  • 외부 API 연동

  ---

  🧠 참고
  • App Router의 API Route는 기본적으로 Edge Runtime에서 실행됩니다. export const runtime = 'nodejs'를 지정하면 Node.js 런타임으로 강제할 수 있습니다.