Currently, I am in the process of developing a Todo manager using Next.js 13, Prisma, and MySQL. In order to include a feature that allows users to delete a todo item, I have implemented the use of a Link tag for the delete button within my code:
...
<Link href={`/api/todo/${id}`}>
<MdDelete className="bg-red-400 hover:bg-red-600 p-1 text-3xl rounded-xl" />
</Link>
...
The value of id is passed as a prop to the component. The route defined in /app/api/todo/[id]/route.ts looks like this:
import { prisma } from "@/lib/database";
import { NextResponse } from "next/server";
export async function DELETE(
req: Request,
{ params }: { params: { id: string } }
) {
await prisma.todo.delete({
where: {
id: params.id,
},
});
return NextResponse.json({ message: "done" });
}
However, upon clicking the Link, it redirects to the URL
http://localhost:3000/api/todo/clkgkh3t70000p1947hi24a3khttps://i.stack.imgur.com/4YOwp.png
where clkgkh3t70000p1947hi24a3k represents the id being passed.
Is there a solution to this problem? Alternatively, what other method can be used to remove the Todo Item?