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

Step1:prismaの初期設定のようなものをファイルにしておく。

./utils/prisma.ts

import { PrismaClient } from '@prisma/client'
const prisma = new PrismaClient()
export default prisma

Step2:作成ボタンを押したらapi/postにデータを送信する。

./pages/index.tsx

import { useState } from "react"

export default function Home() {
  const [title,setTitle] = useState("テスト")
  const [content,setContent] = useState("これはテストデータです")
  const submitPost = async () => {
    try {
      const body = { title, content }
      await fetch("/api/post",{
        method: "POST",
        body: JSON.stringify(body)
      })
    }catch(err) {
      console.log(err)
    }
  }
  return (
    <button onClick={submitPost}>作成</button>
  )
}

useStateでtitleとcontentをセットしています。
まずはお試しでそれぞれ初期値の"テスト"と"これはテストデータです"をcreateします。

const [title,setTitle] = useState("テスト")
const [content,setContent] = useState("これはテストデータです")

onClickで作成ボタンを押したらsubmitPostを実行するようにします。

return (
    <button onClick={submitPost}>作成</button>
)

作成ボタンが押されたらsubmitPostが実行され、JSON形式でtitleとcontentが/api/postに送信されます。

const submitPost = async () => {
    try {
      const body = { title, content }
      await fetch("/api/post",{
        method: "POST",
        body: JSON.stringify(body)
      })
    }catch(err) {
      console.log(err)
    }
}

Step3:api/postに送信されたデータをSQLiteにCreateする。

./pages/api/post.ts

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

export default async function createPost(req:NextApiRequest,res:NextApiResponse) {
    const JSONdata = JSON.parse(req.body)
    const result = await prisma.post.create({
        data: {
            title: JSONdata.title,
            content: JSONdata.content,
            published: true,
        },
    })
    res.json(result)
}

別ファイルにしておいたprismaの初期設定を呼び出します。

import prisma from "@utils/prisma"

送信されたデータをparseしてtitleとcontentをcreateしています。

export default async function createPost(req:NextApiRequest,res:NextApiResponse) {
    const JSONdata = JSON.parse(req.body)
    const result = await prisma.post.create({
        data: {
            title: JSONdata.title,
            content: JSONdata.content,
            published: true,
        },
    })
    res.json(result)
}

prisma studioで確認するとちゃんとcreateできていることが確認できます。

npx prisma studio

次回はテストデータでなくフォームで記述した内容をcreateできるようにします。