はじめに
Next.jsの知識を深めるために、Todoアプリを作ることにしました。そのメモを残しておきます。今回はデータ挿入についてのメモを残します。何か間違っていることなどございましたらコメントいただけますと、とても喜びます。
今までの記事
環境構築編
https://qiita.com/naoyuki2/items/e974c630c6cbd3c55254
【01】Next.js14でTodoアプリ作成(CREATE編)
https://qiita.com/naoyuki2/items/7474d448de7769905d82
【02】Next.js14でTodoアプリ作成(SELECT編)
今回のゴール
データ挿入ができる
１．APIの作成(POSTメソッド)
POSTメソッドの記述
src/app/api/todo/route.tsにPOSTメソッドを記述していく。GETメソッドがすでにあるのでその下に書く。
export async function POST(request: Request) {
// todoテーブルに新規レコードを追加
const body = await request.json()
try {
const todo: todo = await prisma.todo.create({
data: {
title: body.title,
},
})
return NextResponse.json(todo)
} catch (error) {
return NextResponse.json(error)
}
}
コード解説
export async function POST(request: Request) {
この関数はHTTPリクエストを引数として受け取る。
Requestという型がNext.jsで用意されているらしく、importせずとも使えるらしい。反対にResponseという型もある。
const body = await request.json():
この行は、受け取ったレスポンスからJSONデータを非同期に解析する。この中にtitleが入っている。
const todo: todo = await prisma.todo.create({
data: {
title: body.title,
},
})
Prismaのcreate関数を使用して新しいtodoレコードをデータベースに挿入する。SQLでいうINSERT INTO "todo" (title) values (body.title)みたいなこと。
return NextResponse.json(todo)
新しく作成された"todo"レコードをJSON形式で返す。
２．フロントエンドの実装
全部載せてるんで見ずらい。ごめんなさい。+がついている緑の行を前回から新たに追加した。
コードの全体
'use client'
import { useEffect, useState } from 'react'
import { todo } from '@prisma/client'
export default function Home() {
const [todos, setTodos] = useState<todo[]>([])
+ const [inputVal, setInputVal] = useState<string>('')
useEffect(() => {
const getTodo = async () => {
const res = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/todo`)
const data = await res.json()
setTodos(data)
}
getTodo()
}, [])
+ const postTodo = async () => {
+ if (!inputVal) return alert('タイトルを入力してください')
+ const res = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/todo`, {
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/json',
+ },
+ body: JSON.stringify({
+ title: inputVal,
+ }),
+ })
+ const data = await res.json()
+ setTodos([...todos, data])
+ setInputVal('')
+ }
return (
<>
+ <input
+ placeholder="タイトル入力"
+ value={inputVal}
+ onChange={(e) => setInputVal(e.target.value)}
+ />
+ <button onClick={() => postTodo()}>追加</button>
{todos.map((todo) => (
<div key={todo.id}>
<p>{todo.id}</p>
<p>{todo.title}</p>
<p>{todo.content}</p>
<p>{todo.isDone}</p>
<p>{new Date(todo.createdAt).toLocaleString()}</p>
<p>{new Date(todo.updatedAt).toLocaleString()}</p>
</div>
))}
</>
)
}
コードの解説
const [inputVal, setInputVal] = useState<string>('')
タイトルを入力するinput要素のvalue属性を管理するためにuseStateを使用する。
const postTodo = async () => {
if (!inputVal) return alert('タイトルを入力してください')...
postTodo関数を実行時にinputValの中身が空だった場合はアラートを出し、returnがあるのでここで関数が終了する。
const res = await fetch(`${process.env.NEXT_PUBLIC_API_URL}/todo`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
title: inputVal,
}),
})
前々回の記事で.envファイルにAPIルートを書いているため、今回も流用する。
今回はPOSTメソッドなのでmethodタイプを記述する。
JSON形式でやり取りするため、headersにこのような記述をする。
bodyにはAPIに渡すものを記述する。今回はtitleのみでいいのでtitle情報を保持しているinputValを渡す。
const data = await res.json()
setTodos([...todos, data])
setInputVal('')
返ってきたレスポンスをJSON形式でdataに代入する。
useStateのsetTodosでtodosにデータを入れる。
...todosはスプレッド構文といって配列の中身を展開することができる。todosを展開して、dataを新しく追加している。
setInputVal('')でinput要素を空にして次のタイトルを入力しやすいようにしている。
<input
placeholder="タイトル入力"
value={inputVal}
onChange={(e) => setInputVal(e.target.value)}
/>
valueにはuseStateのinputValを設定する。
そして、onChangeイベントを設定することでinput要素の中身が変更されるたびにinputValの値を更新している。
<button onClick={() => postTodo()}>追加</button>
onClickイベントにより、先ほど作ったpostTodo関数を呼び出している。
３．挿入できるか試す！
これでおそらくデータの挿入ができるはず！！
空だったら下のようにアラートが出る。
テストと入力して、追加をクリックすると下にテストというデータが追加されるはず。
おわりに
POSTはまだ簡単な気がする。UPDATEやDELETEは条件が増えて大変そう。