NEXT.js import NextApiRequest / NextRequest 차이점

Q. 

import { NextApiRequest, NextApiResponse } from "next"

import { NextRequest, NextResponse } from "next/server" 

import 차이?

 

 

CAHT.

Next.js의 app 디렉토리에서 사용하는 라우팅 방식과 pages 디렉토리에서 사용하는 라우팅 방식은 약간 다르다. 각 라우팅 방식에서 사용되는 import 문도 다르다. 이 두 개의 import 차이에 대해 설명하겠다.

1. NextApiRequest와 NextApiResponse (Pages 디렉토리)

NextApiRequest와 NextApiResponse는 Next.js의 pages 디렉토리에서 API 라우트를 정의할 때 사용된다. 이 방식은 Next.js 12 이전부터 사용되던 전통적인 방식이다.

사용 예시 (pages/api/example.js)

import { NextApiRequest, NextApiResponse } from 'next';

export default function handler(req = NextApiRequest, res = NextApiResponse) {
  res.status(200).json({ message: 'Hello from API Route in pages!' });
}

• NextApiRequest: Next.js의 req 객체로, Node.js의 IncomingMessage를 확장한 객체이다.
• NextApiResponse: Next.js의 res 객체로, Node.js의 ServerResponse를 확장한 객체이다.

이 방식은 Next.js 13 이후에도 pages 디렉토리를 사용하는 경우에 사용된다.

2. NextRequest와 NextResponse (App 디렉토리)

NextRequest와 NextResponse는 Next.js 13에서 도입된 새로운 app 디렉토리 구조에서 사용하는 라우팅 방식이다. 이 방식은 React Server Components를 지원하며, pages 디렉토리와는 다른 방식으로 동작한다.

사용 예시 (app/api/example/route.js)

import { NextRequest, NextResponse } from 'next/server';

export async function GET(req = NextRequest) {
  return NextResponse.json({ message: 'Hello from API Route in app!' });
}

• NextRequest: Next.js의 req 객체로, Web API의 Request 객체를 확장한 객체이다.
• NextResponse: Next.js의 res 객체로, Web API의 Response 객체를 확장한 객체이다.

이 방식은 Next.js의 최신 기능을 활용하며, app 디렉토리를 사용할 때 주로 사용된다.

주요 차이점 요약

• 라우트 정의 위치:
  • NextApiRequest와 NextApiResponse: pages 디렉토리에서 사용.
  • NextRequest와 NextResponse: app 디렉토리에서 사용.
• 확장된 객체:
  • NextApiRequest/NextApiResponse: Node.js의 IncomingMessage와 ServerResponse를 확장.
  • NextRequest/NextResponse: Web API의 Request와 Response를 확장.
• 사용 패턴:
  • NextApiRequest/NextApiResponse: 전통적인 Node.js 스타일의 API 라우트.
  • NextRequest/NextResponse: 최신 Next.js의 서버 컴포넌트 스타일 API 라우트.

Next.js 13 이후에는 app 디렉토리를 사용하여 최신 기능을 활용하는 것이 권장된다. 이는 React의 서버 컴포넌트와 더 나은 통합을 제공하고, 새로운 기능을 지원하기 때문이다. 하지만 기존 프로젝트나 전통적인 라우팅 방식을 유지하고 싶다면 pages 디렉토리를 사용할 수 있다.

 

 

결론

import { NextApiRequest, NextApiResponse } from "next"  > page route

import { NextRequest, NextResponse } from "next/server"  > app route