결제시스템을 구현 중인데 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로 온게 맞는지 확인 하면 좋을 듯 하다.