Next.js Discord

Discord Forum

Is this an API route? I was told that this is not an API Route

Unanswered
Jenn posted this in #help-forum
Open in Discord
To be exact: I received a 404 Not Found" response

import { createServerComponentClient } from "@supabase/auth-helpers-nextjs";
import { NextApiRequest, NextApiResponse } from "next";
import { cookies } from "next/headers";

export default async function deleteWaterType(req: NextApiRequest, res: NextApiResponse) {
  if (req.method === "DELETE") {
    const { water_id } = req.body as { water_id: number }; // You can pass the water_id in the request body

    try {
      // Use the water_id to specify which record to delete
      const supabase = createServerComponentClient({ cookies });
      const { data, error } = await supabase
        .from("water_type") // Replace with your table name
        .delete()
        .eq("id", Number(water_id));

      if (error) {
        return res.status(500).json({ error: "Error deleting record" });
      }

      console.log("Response data:", data); // Changed "res" to "data" to log the correct variable
      return res.status(200).json({ message: "Record deleted successfully" });
    } catch (error) {
      return res.status(500).json({ error: "Error deleting record" });
    }
  } else {
    return res.status(405).json({ error: "Method not allowed" });
  }
}


I am calling it like this:
   try {
      const response = await fetch("/auth/actions/waterTypes/deleteWaterType", {
        method: "DELETE",
        body: JSON.stringify({ water_id }),
        headers: {
          "Content-Type": "application/json",
        },
      });

      console.log(response,"response")

      if (response.status === 200) {
        console.log(`Deleted record with ID: ${water_id}`);
        setErrorMessage(null);
      } else {
        const errorResponse = await response.json();
        setErrorMessage(errorResponse.error);
      }

      toggleClose();
    } catch (error) {
      console.error("Error deleting record:", error);
      setErrorMessage("An error occurred while deleting the record.");
    }
  };

29 Replies

oh okay, I was actually using another thing like this
'use server'
import { createServerComponentClient } from "@supabase/auth-helpers-nextjs";
import { revalidatePath } from "next/cache";
import { cookies } from "next/headers"

export async function addWaterType(formData: FormData) {
  try {
    const name = formData.get('name')
    const price = formData.get('price')
    const supabase = createServerComponentClient({ cookies })
    await supabase.from('water_type').insert({name, price}).select()
    revalidatePath('/waterTypes')
    return { message: 'Success!' }
  } catch (e) {
    return { message: 'There was an error.' }
  }
}
but this was workin. I did not follow the filename wih a route.ts
yeah server actions also work
I can also just mix it all up, like I can user server actions for the create and edit, and then an API for the delete?
server actions always use post...
Are there any errors on my code or is it just the file routing?
@Jenn Are there any errors on my code or is it just the file routing?
i haven't looked that much at your code, but do you have errors? (looks good enough from basic look)
yeah, it still says DELETE http://localhost:3000/waterTypes/api/route.ts 404 (Not Found) and Error deleting record: SyntaxError: Unexpected token '<', "<!DOCTYPE "... is not valid JSON
i meant your file be in route.ts, but the actual url what the folder pathname was
I changed it to route.ts
now you should beable to use DELETE /waterTypes
Still getting the sam error
wait i forgot about the /api
i mean this is what you use: DELETE /waterTypes/api
The sam error still shows. I can see this on the terminal Detected default export and No HTTP methods exported
ohh i should have seen that too, you just export it (no default)
export async function DELETE(
What else am I doing wrong here?
The response is still 404
uhh you arn't doing the return properly still
also show which url you are using and your code's filename (+make sure you are using delete)
and the check of method being delete is useless
My file name is in app/waterTpes/api/route.ts
ohh you didn't understand how i meant to fetch
i meant method in that (it is a common way of saying method and url): https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch#supplying_request_options
Thanks. I'll have to check this out as well