Next 13 App Router - How to handle API request

Answered

Cape horse mackerel posted this in #help-forum

Cape horse mackerelOP

2023-08-26T09:07:36.000Z

Hi, I want to use API handlers in Next13, but then the app router is totally different from the page router. I want to add a cart item in the cartItems.json everytime I click the add to cart button. My file structure is like this:
__
app
api
router.js
shop
[prodId].js
page.js
cartItems.json
__

In my shop > [prodId].js:

//The add to cart button

const addToCart = async ()=>{
      try{
        const res = await fetch ("/api", {
          method: 'POST',
          headers: {'Content-Type': "application/json"},
          body: JSON.stringify(result)
        })
        const data= res.json()
        console.log(data.message)
      }
      catch (e){
        console.log(e.message)
      }

__
In my cartItems.json:
{ "cartCollection" : [ { } ] }

__
How do I handle the api for this in my app> api> route.js?
I tried this but it doesnt work :

import cartItems from "../cartItems.json"

export async function POST (req){
  const body = await req.json()
  console.log(body)
        // const {
        //     image,
        //     quantity,
        //     plantName,
        //     price,
        //     code,
        //     rating,
        //     reviews,
        //     itemSold,
        //     stocks
        // } = req.body;

        // cartItems.cartCollection.push({image, quantity, plantName, price, code, rating, reviews, itemSold, stocks});
      return new Response(JSON.stringify({message: "Added to cart successfully!"}))
}

Answered by Cape horse mackerel

import cartItems from "../cartItems.json"
import { NextResponse } from 'next/server'

export async function POST (req){
const body = await req.json()

const {
image,
quantity,
plantName,
price,
code,
rating,
reviews,
itemSold,
stocks
} = body;

const newData = {image, quantity, plantName, price, code, rating, reviews, itemSold, stocks}
const message = "Added to Cart Successfully"
const responseObj = {message, newData}
cartItems.cartCollection.push(newData);
const jsonResponse = JSON.stringify(responseObj);

return new NextResponse(jsonResponse);

}

View full answer