Skip to main content

route.ts 데모

route.ts(또는 route.js)는 Web API의 Request/Response를 직접 처리하는 서버 사이드 API 엔드포인트입니다. page.tsx 대신 같은 세그먼트에 배치하며, 두 파일은 공존할 수 없습니다.

routing-files/route-demo/
├── page.tsx      ← 현재 페이지 (API 호출 UI)
└── api/
    └── route.ts  ← API 엔드포인트 (GET 핸들러)

아래 버튼을 클릭하면 GET /demo/nextjs/16.1.6/project-structure/routing-files/route-demo/api를 호출합니다.

핵심 코드

// route.ts — API 엔드포인트
import { NextResponse } from 'next/server';

export const GET = () => {
  return NextResponse.json({
    message: 'route.ts API 응답입니다!',
    timestamp: new Date().toISOString(),
    method: 'GET',
  });
};

// POST, PUT, PATCH, DELETE, HEAD, OPTIONS도 지원
export const POST = async (request: Request) => {
  const body = await request.json();
  return NextResponse.json({ received: body });
};

설명

  • route.ts는 GET, POST, PUT, PATCH, DELETE, HEAD, OPTIONS HTTP 메서드를 지원합니다.
  • 같은 세그먼트에 page.tsx와 route.ts를 동시에 둘 수 없습니다.
  • Request와 Response Web API를 직접 사용합니다.
  • NextResponse를 사용하면 JSON 응답, 리다이렉트, 헤더 설정 등을 편리하게 처리할 수 있습니다.
  • 기본적으로 정적으로 캐시되며, POST 핸들러나 dynamic 설정으로 동적 처리할 수 있습니다.
← 목록으로 돌아가기