Nextjs×Prisma×SQLiteでcreateする方法（その2）

その1は下記リンクからどうぞ。
https://zenn.dev/ayataka_0606/articles/c85ad2f92b59f8

formからデータベースにcreateする。

import React, { useState } from "react"
import Router from "next/router"

export default function CreateForm() {
  const [title,setTitle] = useState("")
  const [content,setContent] = useState("")
  const createPost = async (e: React.SyntheticEvent) => {
    e.preventDefault()
    try {
      const body = { title, content }
      await fetch("/api/post",{
        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)} />
      <label htmlFor="content">内容：</label>
      <textarea id="content" onChange={(e)=>setContent(e.target.value)} />
      <button onClick={createPost}>作成</button>
    </form>
  )
}

前回はテストだったためtitleとcontentに初期値が入っていましたが今回は入れていません。

const [title,setTitle] = useState("")
const [content,setContent] = useState("")

簡単ですがformを作成し、titleとcontentを入力できるようにしています。

return (
    <form>
      <label htmlFor="title">タイトル：</label>
      <input id="title" type="text" onChange={(e)=>setTitle(e.target.value)} />
      <label htmlFor="content">内容：</label>
      <textarea id="content" onChange={(e)=>setContent(e.target.value)} />
      <button onClick={submitPost}>作成</button>
    </form>
)

これにより、ブラウザでformが表示されます。適当に内容を記述して作成ボタンを押すとデータベースにcreateされます。

npx prisma studio

次回はreadをしてみようと思います。