[Next] POST로 url 요청시 request body 받아 사용하기(feat.405 error)

결제시스템을 구현 중인데 url을 POST로 요청해서 Request Data를 사용해야 하는 경우가 생겼다. Nextjs를 사용중이므로 getServerSideProps을 이용해 body를 받아보도록 하자

pages/api

Nextjs의 규칙으로 pages/ 루트의 api 폴더에 index.js를 생성해 POST 요청시 어떻게 처리 할 지 만들 수 있다. 지금은 request body를 받아옴은 물론 후가공이 필요하기 때문에 이 방식으로 진행하지는 않았다.

export default async function handler(req, res) {
  await bodyParser.json()(req, res, async () => {
    const requestBody = req.body;
    if (req.method === "POST") {
      if (requestBody) {
        // 데이터 처리 로직
      }
    }
  });
}

bodyParser

그래서 선택한 방법은 bodyParser 라이브러리를 사용하는 것.

npm i body-parser
// or
yarn add body-parser

POST로 요청될 페이지js에서 사용하면 된다. 'pages/payment/index.js'에 아래와 같이 코드를 추가했다.

import bodyParser from "body-parser";
import util from "util";

const getBody = util.promisify(bodyParser.urlencoded());

export default function Payment({ requestBody }) {
  console.lo(requestBody)
  const { redirectUrl, bodyData, userId } = requestBody;

  useEffect(() => {
    if (requestBody) {
      // 추가가공 and 데이터 처리
    }
  }, [requestBody]);

  return <div></div>;
}

export async function getServerSideProps({ req, res }) {
  await getBody(req, res);
  const requestBody = req.body;

  return {
    props: {
      requestBody,
    },
  };
}

util을 같이 사용하면 응답에 대한 콜백을 한 번에 처리할 수 있다.

405 Error

  Next로 만든 프로젝트만 그런지 모르겠는데 POST로 요청 됐을 때 이를 처리하는 로직( 위와 같은 )이 없다면 그냥 405 error를 뱉는다. 에러에 대해 서치해보니 POST를 받기위한 설정이 필요하다해서 꽤나 헛수고를 했는데 POST로 요청 했을 때 처리 할 수 있는 로직이 생기기만 해도 405 error는 없어진다. 그 외 개발자도구 > Network 탭에서 Request Method : POST로 온게 맞는지 확인 하면 좋을 듯 하다.