내일배움캠프 React_7기 TIL - 40. Next.js 라우트 핸들러(Route Handlers)

📚 TIL: Next.js 라우트 핸들러(Route Handlers)

---

🚀 1. 라우트 핸들러란?

• *라우트 핸들러(Route Handlers)는 Next.js 13부터 도입된 API 라우트의 대체 기능**이다.
• app 디렉터리 아래에서 서버 측 로직을 처리하는 엔드포인트를 정의할 수 있다.
• 서버리스(Serverless) 함수로 동작하며, 자동으로 스케일링 및 콜드 스타트를 지원한다.

---

🛠️ 2. 사용법

라우트 핸들러는 특정 경로의 route.ts 또는 route.js 파일로 정의된다.

예시: /app/api/hello/route.ts

import { NextResponse } from 'next/server';

export async function GET(request: Request) {
    return NextResponse.json({ message: 'Hello, World!' });
}

• GET, POST, PUT, DELETE 등 HTTP 메서드에 따라 다른 핸들러를 정의할 수 있다.
• NextResponse를 사용해 JSON 응답을 반환한다.

---

🌐 3. 주요 특징

1. 서버리스(Serverless) 함수
   • 필요에 따라 자동으로 인프라가 확장된다.
   • 사용량이 없을 때는 리소스가 할당되지 않는다.
2. 콜드 스타트(Cold Start)
   • 첫 요청 시 약간의 지연이 발생할 수 있으나, 캐싱을 통해 최적화된다.
3. 미들웨어와 연동 가능
   • Middleware를 통해 요청을 전처리하거나 인증을 할 수 있다.
4. Edge Runtime 지원
   • 경량화된 Edge Runtime을 사용할 수 있어 응답 속도가 빠르다.

---

📊 4. 서버 액션(Server Actions)과의 차이점

특징	라우트 핸들러(Route Handlers)	서버 액션(Server Actions)
사용 목적	API 엔드포인트 생성	서버 측 함수 호출
동작 위치	주로 API 라우트에서 사용	컴포넌트 내에서 직접 사용
데이터 반환	JSON 응답 반환	함수 결과 반환
호출 방식	HTTP 요청	직접 함수 호출

---

✅ 5. 라우트 핸들러 Best Practices

1. 에러 핸들링
   • try-catch로 예상치 못한 오류를 방지한다.
2. 상태 코드 명시
   • NextResponse의 status 옵션을 사용해 명확한 상태 코드를 반환한다.
3. 보안 고려
   • 인증 및 권한 검사를 철저히 한다.

예시:

export async function GET(request: Request) {
    try {
        const data = { key: 'value' };
        return NextResponse.json(data, { status: 200 });
    } catch (error) {
        return NextResponse.json({ error: 'Something went wrong' }, { status: 500 });
    }
}

---

📝 6. 결론

• 라우트 핸들러(Route Handlers)는 API 엔드포인트를 쉽게 생성하고 관리할 수 있는 강력한 기능이다.
• 서버리스 아키텍처를 활용해 확장성과 효율성을 극대화할 수 있다.
• 프로젝트 요구사항에 따라 라우트 핸들러와 서버 액션을 적절히 선택해야 한다.