Nextjs×Prisma×SQLiteでdeleteする方法（その1）

削除の場合も編集と同じで、まずは削除するデータのIDを取得します。
今回は編集画面に削除ボタンを実装します。

./pages/post/edit/[id].tsx

import prisma from "@utils/prisma"
import { useState } from "react"
import { Post } from "@utils/types"
import Router from "next/router"
import Link from "next/link"

export default function Edit({post}:{post:Post}) {
    const [id,setId] = useState(`${post.id}`)
    const [title,setTitle] = useState(`${post.title}`)
    const [content,setContent] = useState(`${post.content}`)
    const updatePost = async (e: React.SyntheticEvent) => {
        e.preventDefault()
        try {
            const body = { id, title, content }
            await fetch("/api/edit",{
                method: "POST",
                body: JSON.stringify(body)
            })
            await Router.push("/post")
        }catch(err) {
            console.log(err)
        }
    }
    const deletePost = async (e: React.SyntheticEvent) => {
        e.preventDefault()
        try {
            const body = { id }
            await fetch("/api/delete",{
                method: "POST",
                body: JSON.stringify(body)
            })
            await Router.push("/post")
        }catch(err) {
            console.log(err)
        }
    }
    return (
        <form>
          <label htmlFor="title">タイトル：</label>
          <input id="title" type="text" onChange={(e)=>setTitle(e.target.value)} value={title}/>
          <label htmlFor="content">内容：</label>
          <textarea id="content" onChange={(e)=>setContent(e.target.value)} value={content}/>
          <button onClick={updatePost}>編集</button>
          <button onClick={deletePost}>削除</button>
          <Link href="/post">一覧</Link>
        </form>
    )
}
export async function getServerSideProps({params}:{params:{id:number}}) {
    const post = await prisma.post.findUnique({
        where: {
            id: Number(params.id)
        }
    })
    return {
        props: {
            post: post 
        }
    }
}

削除ボタンを押したらdeletePostを実行します。

<button onClick={deletePost}>削除</button>

deletePostでは削除するデータのidを/api/deleteに送信しています。

const deletePost = async (e: React.SyntheticEvent) => {
        e.preventDefault()
        try {
            const body = { id }
            await fetch("/api/delete",{
                method: "POST",
                body: JSON.stringify(body)
            })
            await Router.push("/post")
        }catch(err) {
            console.log(err)
        }
}

/api/delete.tsでは送信されてきたidのデータをdeleteしています。

./pages/api/delete.ts

import prisma from "@utils/prisma"
import { NextApiRequest, NextApiResponse } from "next"

export default async function deletePost(req:NextApiRequest,res:NextApiResponse) {
    const JSONdata = JSON.parse(req.body)
    const result = await prisma.post.delete({
        where: {
            id: Number(JSONdata.id)
        }
    })
    res.json(result)
}

編集画面にある削除ボタンを押すと一覧から削除されたことが分かります。

これでCRUDができました。
しかし、このままでは誰でもCRUDができてしまうので、管理者認証をしてみたいと思います。
認証にはNext-Authというものがあるみたいなので、そちらで実装したいと思います。