[NextJS] Route Handlers

[NextJS] Route Handlers

설정

// app/api/route.ts
import { NextRequest } from "next/server";

export async function GET(request: NextRequest) {

}

 

app 디렉터리 내의 route.ts (js) 파일로 정의됩니다.

app 디렉터리 내에서 route.ts로 파일이름을 설정하면 NextJS가 알아서 API Router로 인식합니다.

 

라우터 핸들러는 app 디렉터리 내에서만 사용할 수 있습니다.

---

HTTP 메서드

POST, GET, PUT, PATCH, DELETE, OPTIONS,... 등이 지원됩니다.

지원되지 않는 메서드를 호출하면 405번 에러가 발생합니다. (Method Not Allowed)

 

반응형

---

예시

// app/api/route.ts

import { NextRequest } from "next/server";

export async function POST(request: NextRequest) {
  const data = await request.json();
  return Response.json(data);
}

 

"use client"

export default function LogIn() {
  const onClick = async() => {
    const response = await fetch("/api", {
      method: "POST",
      body: JSON.stringify({
        username: "gg",
        password: "1111",
      }),
    });
    console.log(await response.json());
  }

  return (
    <button onClick={onClick}>Log in</button>
  )
}

 

로그인 버튼 클릭 시 

/api의 POST에 의해 return 된 값이 나타난다.

{username: 'gg', password: '1111'}

---

NextRequest & Request

Request도 많이 사용하지만,

NextRequest가 Request보다 더 좋은 점은

쿠키, ip, 위치, 현재 사용자의 url, 이동할 url 정보도 제공해 주기 때문이다.

// NextRequest

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;
}