Response와 NextResponse의 차이

Response와 NextResponse는 Next.js와 브라우저 환경에서 사용되는 두 가지 다른 응답 객체로, 각각의 역할과 기능에서 차이가 있습니다.

1. Response

정의: Web API에서 제공하는 표준 Response 객체.
사용 범위: 브라우저 및 Node.js 환경에서 사용되며, Next.js와 무관하게 웹 표준에 속하는 객체.
특징: fetch API 호출에서 반환되는 객체 타입.
표준 HTTP 응답을 다룰 때 사용.
메서드 및 속성:
-.status, .statusText - 응답 상태 코드 및 상태 텍스트.
-.json(), .text() - 응답 본문을 처리하는 메서드.
-.headers - 응답 헤더를 다루는 속성.

2. NextResponse

정의: Next.js 13 이상에서 API 라우트 작성할 때 사용하는 확장된 응답 객체.
사용 범위: Next.js 애플리케이션의 미들웨어 및 Edge API Routes에서 주로 사용.
특징:
Response를 확장하여 Next.js의 특정 기능을 추가적으로 제공.
cookies와 같은 Next.js 전용 메서드가 포함되어 있음.
서버 측 렌더링과 Edge 환경에서 더 나은 개발자 경험을 제공.
메서드 및 속성:
-.redirect(url) - 특정 URL로 리다이렉트.
-.rewrite(url) - 요청 경로를 재작성.
-.json(data) - JSON 응답을 반환하는 편리한 메서드.
-.cookies.set(name, value) - 쿠키 설정.
-.cookies.get(name) - 쿠키 읽기.

NextApiResponse와 NextResponse주요 차이점

• NextApiResponse: Next.js 12 이하에서 사용되던 API 응답 객체입니다. pages/api 폴더에서 API를 처리할 때 사용되었습니다.
• NextResponse: Next.js 13 이상에서 app 디렉토리와 서버 컴포넌트를 사용한 라우팅 시스템에 맞춰 도입된 응답 객체입니다. NextRequest와 함께 사용되며, 새로운 API 라우트 작성 방식에 최적화되어 있습니다.

언제 사용해야 하나?

일반적인 API 응답 또는 브라우저 표준 작업이 필요할 경우 ➡️ Response
Next.js 13 이상에서 서버측 라우트에 작성 ➡️ NextResponse

// Response 사용 예
return new Response(JSON.stringify({ message: "Hello" }), { status: 200 });

// NextResponse 사용 예
// /app/api/signup/route.ts
import { NextRequest, NextResponse } from 'next/server';

export async function POST(req: NextRequest) {
    const { email } = await req.json();  // 클라이언트에서 보낸 JSON 데이터 받기

    // 이미 존재하는 계정일 경우
    const existingAccount = await checkIfAccountExists(email); 
    if (existingAccount) {
        return NextResponse.json({ error: "이미 존재하는 계정입니다." }, { status: 400 });
    }

    // 정상적인 회원가입 처리
    return NextResponse.json({ message: "회원가입이 성공적으로 완료되었습니다." }, { status: 200 });
}