Next.js 라우트 핸들러 : route.js에 숨은 규칙들!

혜연·2025년 5월 19일
0

Next.js

목록 보기
10/20
post-thumbnail

Next.js의 라우트 핸들러, 파일 이름

Next.js에서 API를 만들려면 app/api/.../route.js 안에 함수들을 선언해야 한다.
페이지 컴포넌트가 아닌, 서버 전용 API 함수 파일로 작동한다.

🧩 라우트 핸들러란?

클라이언트에서 호출하는 HTTP 요청(GET, POST, PATCH, PUT, DELETE..)에 응답하는 서버 전용 함수 파일
단, 페이지 컴포넌트와 다르게 화면을 렌더링하지 않는다.

export function GET(request){
    console.log(request);

    // return Response.json();
    return new Response('Hello');
}

📌 핵심 특징 요약

  • GET, POST, PUT, DELETEHTTP 메서드 이름으로 export해야 한다.
  • 파일명은 route.js여야 Next.js가 라우트 핸들러로 인식
  • JSON 데이터를 수신하거나 반한하는 용도로 사용
  • Next.js가 자동으로 request 객체를 인자로 넘겨줌
  • 같은 경로에 여러 메서드를 정의해서 다양한 요청을 처리 가능

⚠️ 헷갈릴만한 포인트

1. 파일 이름은 route.js로 두기

  • route.js가 아니면 Next.js가 라우트 핸들러로 인식하지 못함!
  • GET, POST 등 메서드 함수가 없으면 → 405 Method Not Allowed

2. return 값이 JSX면 에러!

라우트 핸들러는 API를 위한 서버 전용 파일이기 때문에
<div>Hello</div> 같은 JSX를 리턴하면 안 되고,
반드시 new Response() 또는 Response.json() 형식으로 반환해야 함!

3.aysnc 함수로 request body 파싱 가능

라우트 핸드러는 서버 함수이기 때문에 async/await 사용이 가능하다.
예를 들어, POST 요청에서 request.json()을 처리하려면 await이 필요하다.

export async function POST(request) {
  const body = await request.json();
  return Response.json({ name: body.name });
}

await없이 .json()을 호출하면 데이터가 아니라 Promise가 응답에 포함될 수 있다.

0개의 댓글