1. Next API 만들어보기 - GET

아래 Vercel에서 제공하는 Next js공식문서를 보면 Next js에서 제공하는 라우팅 기능과 핸들러 관련 내용이 자세히 설명되어있다.

Routing: Route Handlers | Next.js

app/api/route.ts

API를 만들어볼 것이기 때문에 성격에 맞는 위치에  api폴더를 생성해주고 route파일을 만들어준다.

이때는 파일 확장자를 표준에 맞춰 구분하여 tsx파일 대신 ts파일로 만들어준다 (리액트 컴포넌트가 아니기 때문에 구분)

 

예시를 보면 다음과 같이 GET API에 대한 예시코드가 나와있다

export async function GET() {
  const res = await fetch('https://data.mongodb-api.com/...', {
    headers: {
      'Content-Type': 'application/json',
      'API-Key': process.env.DATA_API_KEY,
    },
  })
  const data = await res.json()
 
  return Response.json({ data })
}

 

만든 API가 잘 작동하는지 테스트는 Postman에서 해보자

Postman

 

 

공식문서에 사용 가능한 메소드들에 대한 설명이 나와있다

Next에서 제공하는 추가기능

 

 

우리가 살펴볼 부분은 NextRequest와 NextResponse 부분이다

Route.ts에서 아래처럼 Next의 기능들을 활용하여 커스텀가능한 API를 만들어줄 수 있다

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

export async function GET(request: NextRequest) {
  const response = {
    massage: "데이터를 가져오자",
    data: "데이터",
  };

  return NextResponse.json(response, { status: 200 });
}

 

 

NextResponse를 통해 json방식으로 결과를 return해주고 있다, 어떤 형태로 작성해주어야 하는지 메소드를 통해 살펴보자

마우스를 올려 JsonBody와 ResponseInit 2개의 인수가 필요하다는 것을 알 수 있다.

ResponseInit이 interface라는것을 확인 할 수 있다.

This로 한번 더 들어가보면 ResponseInit에 넣을수 있는 3가지 확인가능

 

 Next js에서는 다이나믹 라우팅을 제공합니다.

 

우리는 useSearchParams를 사용하여 다이나믹 api를 만들어볼 수 있습니다

- 아래 공식문서 참고

Functions: useSearchParams | Next.js

 

다이나믹 라우팅과 useSearchParams의 쿼리스트링을 사용한 api

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

export async function GET(
  request: NextRequest,
  { params }: { params: { slug: string } }
) {
  const searchParams = request.nextUrl.searchParams;
  const search = searchParams.get("search");
  const response = {
    massage: "게시물 한개!!%!",
    data: {
      id: params.slug,
      title: "데이터를 가져와볼까",
      is_done: false,
      query: search,
    },
  };

  return NextResponse.json(response, { status: 200 });
}