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.
POSTJSON.parse() to parse the JSON on in the routeAPI 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().
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
}
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.