Router handler

Router handler란?

라우터 핸들러는 특정 경로로 들어오는 요청을 처리하는 코드를 의미한다.

• 예를 들어, 사용자 http://example.com/api/hello로 요청을 보내면, 이 요청을 처리하는 코드를 라우터 핸들러라고 한다.
  
  라우터 핸들러는 요청을 받아서 적절한 응답을 돌려주는 역할을 한다. 예를 들어, 데이터를 받아서 저장하거나, 데이터를 불러와서 사용자에게 보내줄 수 있다.

1. next.js에서 라우터 핸들러 만들기

npx create-next-app my-next-app(원하는 폴더명)

먼저 Next.js 프로젝트를 만든다.

2. API 라우트 파일 만들기

pages/api 폴더에 라우트 파일을 만들어서 API 요청을 처리할 수 있어요. 예를 들어, pages/api/hello.ts 파일를 예시로 만들었다고 가정한다.

export default function handler(req, res) {
  res.status(200).json({ message: 'Hello, Next.js!' });
}

• /api/hello 경로로 요청이 들어오면 "Hello, Next.js!"라는 메시지를 JSON 형식으로 응답한다.

3. Next.js 서버 실행하기

프로젝트 폴더로 이동해서 Next.js 서버를 실행한다.

cd my-next-app
npm run dev

• 이 명령어를 실행하면 로컬 서버가 실행되고, 브라우저에서 http://localhost:3000/api/hello에 접속하면 JSON 응답을 볼 수 있다.

4. 여러 가지 요청 처리하기

이제 POST, PUT, DELETE 요청도 처리해볼게요. 새로운 폴더와 파일을 만들어봅시다. pages/api/test 폴더를 만들고, 그 안에 route.ts 파일을 만든다.

// pages/api/test/route.ts

export async function GET(request) {
  return new Response(JSON.stringify({ message: "GET /api/test" }), { status: 200 });
}

export async function POST(request) {
  return new Response(JSON.stringify({ message: "POST /api/test" }), { status: 200 });
}

export async function PUT(request) {
  return new Response(JSON.stringify({ message: "PUT /api/test" }), { status: 200 });
}

export async function DELETE(request) {
  return new Response(JSON.stringify({ message: "DELETE /api/test" }), { status: 200 });
}

export async function PATCH(request) {
  return new Response(JSON.stringify({ message: "PATCH /api/test" }), { status: 200 });
}

-http://localhost:3000/api/test 경로로 GET, POST, PUT, DELETE, PATCH 요청을 보내면 각각 다른 메시지를 받을 수 있다.