I want to setup a POST
route in my api folder using next.js, And I'm sending the data to the route but I can't parse the data to actually save it in the database. what is the best way to handle POST
routes in next.js. particularly parsing the data in JSON
format?
To get POST requests working in Next.js API routes, you likely want to do 3 things.
POST
JSON.parse()
to parse the JSON on in the route (not needed in NextJS v12+)https://nextjs.org/docs/api-routes/api-middlewares
API routes in Next.js by default support all types of requests, including GET, POST, DELETE, etc. So while it isn't required, it's a good idea to restrict the route to the methods you want to support.
In your case, if you want to only support POST
requests on a certain route, you use req.method
to filter out non-post requests.
if (req.method !== 'POST') {
res.status(405).send({ message: 'Only POST requests allowed' })
return
}
To parse the JSON, all you can use JSON.parse()
. This is not needed if you're using NextJS v12+, as long as you've not set bodyParser: false
.
const body = JSON.parse(req.body)
Put it all together, and your API route should look something like this:
// 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
}
Lastly, you need to send a POST request from your front-end code to the backend. You may already know how to do this, but mentioning this for completeness.
fetch('/api/route-name', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(objectWithData),
})
Quick aside, you don't need to worry about cross-browser compatibility for fetch
with Next.js. Next.js automatically adds a polyfill when needed .
As with everything, it depends. In Next.js v12, you do not need JSON.parse(req.body)
in the API route as long as you have NOT explicitly set bodyParser: false
in the exported configuration for the API route (see https://nextjs.org/docs/api-routes/api-middlewares ). The req.body
will be parsed automatically to an object for example if the content-type
of the request is application/json
. In this case since the content is pre-parsed into a object, trying to run JSON.parse(req.body)
in the API will likely throw an error.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.