What is the right way to do a PUT in NextJS 13.4 API? (Response, NextAPIResponse, NextResponse) using the new App Router

Question

What is the right way to do a simple PUT in NextJS 13.4 in the new App Router?

The previous way of doing delete with using NextAPIRequest, NextAPIResponse, using if (req.method === 'PUT') , pulling parameters from the URL via something like this const { id } = request.query;, and throwing error messages with NextAPIResponse seems to be outdated.

Answer 1

Here is an updated PUT api in NextJS 13.4 using the new app routing with error messages included.

For clarity of the example, I'll include a call to a supabase client; the API you're calling can be different but you can see the error messages and such.

// FILE NAME /app/api/tacos/route.js
import { NextResponse } from 'next/server';
import supabase from '../../supabase/client';

export async function PUT(request) {
    try {
       // ! OLD WAY
       // const { id, newData } = req.body; // ! OLD WAY
       // const dataOldWay = JSON.parse(request.body); // ! OLD WAY
       const { id, newData } = await request.json();

       const { data: insertedData, error } = await supabase.from("my_table").update(newData).eq("id", id).select();

       if (error) {
          console.log("error catch");
          
          return NextResponse.json({ error: "Internal Server Error" }, { status: 500 });
          // ! THE FOLLOWING DOES NOT WORK - will assume and return a status 200 response
          // return NextResponse.json({ error: 'Internal Server Error', status: 500 });
       }

       return NextResponse.json({ insertedData });
    } catch {
        return NextResponse.json({ error: 'Catch Error - Internal Server Error' }, { status: 500 });
    }
}

For clarity, in Typescript this function signature would be export async function PUT(request: NextRequest) {

Read more on route handlers here.

And for completeness, here is a very simple function I used in my client-side app to call this API.

// This is being called from a Page in your React app
// 'use client';
// import React from 'react`;
// ... define your other import statements here

const putData = async () => {
   const id = "23423dfe-2343-2323223-232323-232323223";
   const data = { key1: "value1", key2: 22222222 };

   try {
      const response = await fetch("/api/saveCalculation", {
         method: "PUT",
         body: JSON.stringify({id, data}),
         headers: {
            "Content-Type": "application/json",
         },
      });

      if (response.ok) {
          console.log("OKAY");
          const data = await response.json();
          console.log("putData - data updated", responseData);
      } else {
         // Handle the error
         console.log("NOT OKAY");
         const data = await response.json();
         console.log("putData - data NOT updated", responseData);
      }
   } catch (error) {
      console.error("Error", error);
      const data = await response.json();
      console.log("putData - try/catch - error", responseData);
   }
};

Note: You can of course consolidate responseData declaration higher up in code, but I kept it simple, with a smaller scope for readability.