다음 포스트 요청을 어떻게 처리할 것인가?

다음 포스트 요청을 어떻게 처리할 것인가?

셋업하고 싶다POSTnext.js를 사용하여 api 폴더에 route 데이터를 루트로 전송하고 있지만 실제로 데이터베이스에 저장하기 위해 데이터를 구문 분석할 수 없습니다.대처하기 위한 최선의 방법은 무엇인가POSTnext.displaces. 특히 데이터를 해석합니다.JSON포맷?

Next.js API 루트에서 POST 요청을 처리하려면 세 가지 작업을 수행해야 합니다.

• 메서드를 다음으로 제한합니다.POST
• 사용하다JSON.parse()루트의 JSON을 해석한다(NextJS v12+에서는 필요 없음)
• 백엔드로 요청 전송

https://nextjs.org/docs/api-routes/api-middlewares

API 루트

Next.js의 API 루트는 기본적으로 GET, POST, DELETE 등을 포함한 모든 유형의 요청을 지원합니다.따라서 반드시 필요한 것은 아니지만 지원하는 메서드로 루트를 제한하는 것이 좋습니다.

고객님의 경우,POST특정 루트에 대한 요구, 사용req.method비포스트 요구를 필터링 합니다.

if (req.method !== 'POST') {
  res.status(405).send({ message: 'Only POST requests allowed' })
  return
}

JSON을 해석하기 위해 사용할 수 있는 것은JSON.parse()Next JS v12+ 를 사용하고 있는 경우는, 설정이 되어 있지 않은 한, 이 조작은 불필요합니다.bodyParser: false.

const body = JSON.parse(req.body)

모든 것을 종합하면 API 루트는 다음과 같습니다.

// pages/route-name.js

export default function handler(req, res) {
  if (req.method !== 'POST') {
    res.status(405).send({ message: 'Only POST requests allowed' })
    return
  }


  // not needed in NextJS v12+
  const body = JSON.parse(req.body)

  // the rest of your code
}

요청 전송

마지막으로 프런트엔드 코드에서 백엔드로 POST 요청을 전송해야 합니다.이 방법은 이미 알고 계실지 모르지만, 완성도를 높이기 위해 이 방법을 언급해 주십시오.

fetch('/api/route-name', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify(objectWithData),
})

간단히 말해, 크로스 브라우저 호환성에 대해 걱정할 필요가 없습니다.fetchnext.js를 사용합니다.Next.js는 필요할 때 자동으로 폴리필을 추가합니다.

모든 것이 그렇듯이 상황에 따라 다르죠.Next.js v12에서는,JSON.parse(req.body)명시적으로 설정하지 않은 한 API 루트에서bodyParser: false를 참조해 주세요(https://nextjs.org/docs/api-routes/api-middlewares) 참조).그req.body예를 들어 다음과 같은 경우 객체에 자동으로 구문 분석됩니다.content-type요청사항 중application/json이 경우 콘텐츠는 오브젝트로 사전 해석되므로 실행하려고 합니다.JSON.parse(req.body)에러가 발생할 가능성이 있습니다.

언급URL : https://stackoverflow.com/questions/66739797/how-to-handle-a-post-request-in-next-js