NextJS 14 NextApiRequest vs NextRequest (feat.request.json 타입 지정하기)

request.json의 값을 타입 지정하고 싶었습니다.

 

검색하여서 적용한 방법. (NextApiRequest를 확장하여 사용하는 방법)

interface CategoryApiRequest extends NextApiRequest {
  body: {
    name: string;
    description?: string;
  };
}

export async function POST(request: CategoryApiRequest) {
  const { name, description } = request.body;

 

 

비슷하게 생긴 NextRequest와 NextApiRequest 둘의 차이가 무엇인지 알아보려고 합니다.

 

NextRequest

Request는 NodeJs의 Request를 확장하여 만든 클래스였습니다. 그래서 interface, type으로 이루어진 타입이 아닌 class로 이루어져 있었습니다. 

export declare const INTERNALS: unique symbol;
export declare class NextRequest extends Request {
    [INTERNALS]: {
        cookies: RequestCookies;
        geo: RequestData['geo'];
        ip?: string;
        url: string;
        nextUrl: NextURL;
    };
    constructor(input: URL | RequestInfo, init?: RequestInit);
    get cookies(): RequestCookies;
    get geo(): {
        city?: string | undefined;
        country?: string | undefined;
        region?: string | undefined;
        latitude?: string | undefined;
        longitude?: string | undefined;
    } | undefined;
    get ip(): string | undefined;
    get nextUrl(): NextURL;
    /**
     * @deprecated
     * `page` has been deprecated in favour of `URLPattern`.
     * Read more: https://nextjs.org/docs/messages/middleware-request-page
     */
    get page(): void;
    /**
     * @deprecated
     * `ua` has been removed in favour of \`userAgent\` function.
     * Read more: https://nextjs.org/docs/messages/middleware-parse-user-agent
     */
    get ua(): void;
    get url(): string;
}

interface Request extends NodeJS.fetch._Request {}
declare var Request: typeof globalThis extends {
    onmessage: any;
    Request: infer T;
} ? T
    : typeof import("undici-types").Request;

 

 

이것만으로는 정보가 부족해서 공식 문서를 찾아봤습니다.

 

NextRequest는 Request에서 Next에서 편의성을 추가한 클래스이고, Middleware에서 사용한다.라고 Pages Router 방식에서는 설명하고 있습니다.

 

 

Functions: NextRequest and NextResponse | Next.js

 

 

App Router 방식에서는 이제 Route Hanlders , Middleware 모두  NextRequest, NextResponse 방식을 사용한다고 나와있습니다. 기본적으로는 Request, Reponse이지만 NextRequest, NextResponse에서 편리한 메서드를 지원하니 고급 사례에  사용할 수 있다고 알려주고 있었습니다.

 

 

 

 

타입 지정해 주는 방법

 

POST에서 request를 받아 json을 실행하여 읽은 값들의 타입을 지정해주려고 합니다.

 

아래와 같이 타입을 interface로 선언하고 지정해 주면 any 가 아닌 예상하는 타입 값을 확인할 수 있었습니다.

 

interface CategoryApiRequest {
  name: string;
  description?: string;
}

export async function POST(request: NextRequest) {
  const { name, description }: CategoryApiRequest = await request.json();

 

 

 

 

 

NextApiRequest

NextApiRequest는 interface로 이루어진 타입을 위해 선언된 코드였는데요. 주석에 따르면 Next API route request에서 사용하라고 적혀있습니다. 

 

/**
 * Next `API` route request
 */
export interface NextApiRequest extends IncomingMessage {
    /**
     * Object of `query` values from url
     */
    query: Partial<{
        [key: string]: string | string[];
    }>;
    /**
     * Object of `cookies` from header
     */
    cookies: Partial<{
        [key: string]: string;
    }>;
    body: any;
    env: Env;
    draftMode?: boolean;
    preview?: boolean;
    /**
     * Preview data set on the request, if any
     * */
    previewData?: PreviewData;
}

 

 

마찬가지로 공식 문서를 찾아봤습니다.

 

NextApiRequest는 Api route handler에서 사용한다고 나와있습니다. 그리고 Pages Router 방식에서만 사용된다는 것을 알 수 있었습니다.

 

app에서는 결과가 없습니다.

pages에서는 결과가 있습니다.

 

 

 

 

Routing: API Routes | Next.js

 

 

타입 지정하는 방법

 

pages router 방식에서는 req.json으로 읽는 것이 아닌 req.body로 값을 읽는다고 합니다.

 

import type { NextApiRequest, NextApiResponse } from 'next'
 
export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse
) {
  const { name, message } = req.body
 
  try {
    await handleFormInputAsync({ name, message })
    res.redirect(307, '/')
  } catch (err) {
    res.status(500).send({ error: 'Failed to fetch data' })
  }
}

 

 

그래서 타입 지정을 해주려면 아래와 같이 NextApiRequest를 확장하여서 타입 지정을 해줄 수 있었습니다.

자동 완성이 잘 되는 모습

 

결론

NextRequest

 

- app router 방식에서 Route Handler, Middleware 방식에서 모두 사용된다.

- pages router 방식에서 Middleware 방식 등에 사용된다.

 

 

 

NextApiRequest

- app router 방식에서는 사용되지 않는다.

- pages router 방식에서는 Route Handler 방식에서 사용된다.

 

 

NextJS가 App Router 방식과 Pages Router 방식이 모두 존재해서 헷갈리네요!