https://platform.openai.com/playground/でプロンプトを作成します。

タスクマネージャーアプリの作成を複数回に分けて、動画で紹介します。

Next.jsのフォントはlayout.tsxを見ると、Interが標準で設定されています。いろんなフォントの設定を見ていきます。

前回の記事で作成したコーポレートサイトにニュースページを作成します。

React＋Tailwind CSSを使って、コーポレートサイトを作ります。

Auth.js(NextAuth)に関する動画が多く再生されてを伸ばしています。
そこで、Auth.jsの学習ロードマップを紹介します。

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をします。

まずはプロジェクトtodo-app-d1-baseにHonoをインストールします。以下のコマンドを実行します。

前回、インストールしたC3 (create-cloudflare-cli) でプロジェクトを作成します。Cloudflare Pagesのドキュメントを参考にします。

今回からNext.js14でTodoアプリを作成します。言語はTypeScript、フロントエンドはNext.js、CSSはTailwind CSSを使います。