APIに接続してデータを新規作成します。ファイルapi.tsに関数deleteTodoを作成します。

登録するフォームを作成します。<form>の中に<label>と<input>を順に2組作成します。1つ目の<label>には「タイトル」を入力します。2つ目の<label>には「内容」を入力します。

取得した全件データを表示する一覧表を作成します。まずはテーブルtodosに登録したデータも直接入力しています。以下のコードのように<main>と変更します。

page.tsxの<main>の中を削除します。また<main>のclassNameの中もいったん削除します。globals.cssのTailwind CSSの設定以外は削除します。

CRUDとはCREATE、READ、UPDATE、DELETEの頭文字をとった略称です。データの新規作成、読み取り、更新、削除の機能の総称です。

まずはデータベースを作成します。以下のコマンドを実行します。データベース名はtodo-app-d1をします。