NextJS - API 만들기

NextJS는 API를 만들 수 있는 기능을 제공한다.

서버사이드 렌더링을 제공해주는 프레임워크들은 어찌됐든 기반이 NodeJS이고, 서버가 뜨기 때문에

API를 만들 수 있는 기능을 제공해주는 경우가 많다.

 

api라는 디렉토리 안에 파일을 만들면 쉽게 그 이름에 해당하는 API를 만들 수 있다.

https://nextjs.org/docs/pages/building-your-application/routing/api-routes

Routing: API Routes | Next.js

 

아래 예제를 보자

pages/api/hello.ts

import type { NextApiRequest, NextApiResponse } from 'next'
 
type ResponseData = {
  message: string
}
 
export default function handler(
  req: NextApiRequest,
  res: NextApiResponse<ResponseData>
) {
  res.status(200).json({ message: 'Hello from Next.js!' })
}

hello.ts라는 파일을 만들고 위와 같이 작성하면 API를 쉽게 만들 수 있다.

 

간단한 API는 NextJS에서 만들어줘도 괜찮다.

혹은 위 기능을이용해서 서버사이드에서 필요한 데이터를

미리 NextJs에서 데이터를 받은 다음에 가공해서 내려주는 방식을 이용할 수 있다.

 

주의점

위 함수는 api 디렉토리 안에서만 가능하다

 

 

 

간단하게 API를 만들어보자

- 폴더와 파일을 아래와 같이 구성한다.

- data.json에는 jsonplaceholder의 posts데이터가 저장되어있다.

 

그리고 아래와같이 posts/index.ts에 코드를 간단하게 작성해보자

그럼 아래와 같이 url을 작성해 접속하면 데이터를 받아올 수 있게된다.

 

 

그럼 id값을 받아서 불러오는 API는 어떻게 작성할까?

req를 이용해서 받아오는 값을 알아내야한다.

api/index.ts에 아래와 같은 코드를 작성해보자

만약 브라우저 주소창l에 ~/api?test=123이라고 입력하고 접속하면 서버의 req.query안에 해당 쿼리문을 저장하게 된다.

아래와 같이 &로 쿼리문을 추가할 수 있다.

 

그러면 실제로 요청에 따른 데이터를 가져와보자

- 위처럼 req.query로 id를 가져오고 data에서 id에 해당되는 데이터를 찾아 반환해준다.

- 그럼 아래와 같이 하나의 데이터를 가져올 수 있다.

 

현재 req.query.id에 as키워드를 사용했는데 이는 req.query의 데이터가 아래와 같이 타입이 혼용되어 있기 때문이다.

 

404에러 처리하는 법

 

- 404를 statusㄹ 설정하고 데이터를 send()로 빈 값을 보내주면 된다.

 

 

Rest API로 좀 더 고도화하는 방법

GET, POST, PUT, DELETE 와 같은 메서드를 따로 지정해줄 수 있다.

 

 

실제로 컴포넌트에서 우리가 만든 API 요청해보기

postPage도 아래와 같이 작성하면 된다.