フォームからSupabaseにデータを書き込む

このレッスンでは、あなたが作った入力フォームに書いた内容を、そのままインターネット上のデータ置き場（＝Supabase という、クラウドに置いてあるデータベースサービス）へ送って保存できるようにします。郵便ポストに手紙を入れたら、自動で本局へ届くイメージです。所要時間は15分、AIアシスタント（Claude Code / Cursor / ChatGPT など）にお願いしながら進めます。

始める前に、次の2つが終わっていることを確認してください。

• Supabase からデータを画面に表示できる（前レッスン read-data-in-next 完了）
• ボタン付きの入力フォームが画面に置いてある（前レッスン build-form 完了）

どちらかが未完了の場合は、先にそちらを終わらせてください。土台のない家に屋根は載せられません。

ここからは AI に指示を出して、フォームの「送信」ボタンを押したときに Supabase へデータを送るコードを書いてもらいます。エディタで Claude Code / Cursor / Codex CLI などを開き、次のプロンプト（＝AIへの指示文）をそのまま貼ってください。

Next.js の app/page.tsx にあるフォームの送信処理を修正してください。
送信ボタンを押したら、フォームの内容を Supabase の posts テーブルに insert してください。
- 使うライブラリ: @supabase/supabase-js
- 成功したらフォームを空にする
- 失敗したら画面に日本語で「保存できませんでした」と表示する
非エンジニアでも読めるよう、変数名は日本語的にわかりやすくしてください。

AI が書いたコードの中に supabase.from('posts').insert(...) のような1行があれば正解です。これは「posts という引き出しに、新しいメモを1枚入れる」という意味の命令です。

良い例: await supabase.from('posts').insert({ title: タイトル, body: 本文 })

悪い例: supabase.posts.save(...)（このような書き方は存在しません。AIが古い情報で生成した可能性があるので、その場合は「公式ドキュメントの書き方に合わせて」と追加で指示してください）

1. 画面を開いてフォームに適当な文章を入れる（例: タイトル「テスト」本文「はじめての書き込み」）
2. 送信ボタンを押す
3. Supabase のダッシュボード（＝Supabase の管理画面）にある Table Editor で posts テーブルを開く
4. 今入れた行が増えていれば成功です

送信直後のフォームが空になっていれば、画面側の「終わりましたサイン」も正しく動いています。

• 「new row violates row-level security policy」と出る: Supabase の安全ルール（RLS）が書き込みを止めています。AI に「posts テーブルに insert を許可する RLS ポリシーを書いて」と頼み、Supabase 管理画面の SQL Editor で実行してください
• 画面には「保存できた」ように見えるのにテーブルに入っていない: .env.local に入れた Supabase の URL やキーが別プロジェクトのものになっていないか確認します。AI に「現在の .env.local の値で正しいプロジェクトに繋がっているか確認する手順を教えて」と聞くと手順が出てきます
• ボタンを押しても何も起きない: ブラウザの開発者ツール（右クリック→検証→Console タブ）にエラーが出ていないか見てください。エラー文をそのまま AI に貼って「日本語で原因と直し方を教えて」と聞くのが最短です

次の3つが全部 ✅ なら、あなたは「フォーム → Supabase 書き込み」ができる人になりました。

• フォーム送信後、Supabase の Table Editor に新しい行が増えている
• 送信成功後、フォームが空に戻る
• わざと空のまま送って、エラーメッセージが画面に日本語で出る

スクリーンショットを1枚撮って、手元のメモに貼っておくと、次のレッスンで振り返るときに役立ちます。