[Next.js] API 만들기 , Restful한 API만들기

GY·2022년 2월 20일
0

Next.js

목록 보기
4/7
post-thumbnail
post-custom-banner

pages/api 디렉토리에 파일을 만든다.

export default (req, res) => {
  if (req.method === 'POST') {
    //
  } else {
    //
  }
}

req는 http.incomingMessage
res는 http.ServerResponse의 인스턴스이다.

http://localhost:3000/api/파일이름
에 접속하면 받아온 json데이터를 볼 수 있다.

export default function handler(req, res) {
  res.status(200).json(mockData);
}

RESTful API도 만들 수 있을까?

RESTful API란?
API시스템을 구현하기 위한 설계규칙 중 하나로, 각 요청이 어떤 데이터를 위한 것인지 추론 가능하도록 API를 작성하는 것이다.
자세한 내용은 다음의 포스팅에 정리해두었다.
👉 포스팅 보러가기

RESTful한 API의 예시를 들어보자.

api/posts.js 혹은 url/posts/index.js
api/posts/[postId].js

전체 포스팅을 가져올 때는 첫번째를,
포스팅 중 특정 id를 갖는 것만 호출할 때는 두번째 방법을 사용하면 된다.
즉, api/posts/[postId].js로 파일을 만든 뒤 api/posts/44로 호출하면 id값이 44인 포스팅의 데이터만 호출되는 것이다.

하위 경로 전부 포함하기

api/posts//[...multiIds].js
와 같이 ...을 붙이면 여러 depth에 걸친 url을 함께 다룰 수 있다.

api/post/a/b/c의 경우 req객체의 query에는

{ "multiIds": ["a", "b", "c"] }

가 들어와있다.

export default (req, res) => {
  const {
    query: { multiIds },
  } = req
  
  res.end(`Post: ${multiIds,join(', ')}`}
}

"Post: a,b,c"



Reference

profile
Why?에서 시작해 How를 찾는 과정을 좋아합니다. 그 고민과 성장의 과정을 꾸준히 기록하고자 합니다.
post-custom-banner

0개의 댓글