Supabase Storageで画像アップロードを実装する

あなたのアプリに「画像を選んでアップロードする」機能を15分で追加します。ここで言う Supabase Storage（＝Supabaseが用意してくれる「画像・ファイル専用の物置」）は、写真や書類を安全にしまっておける大きな倉庫のようなものです。自分でサーバーを用意する必要はなく、あなたのアプリから「この画像を預けて」と頼むだけで保管してくれます。

料理で例えると、冷蔵庫（Storage）に食材（画像）を入れて、必要なときに取り出すイメージです。今日はこの「冷蔵庫を使えるようにする」ところまでを、AIに手伝ってもらいながら進めます。

• 画像ファイルを選んで Supabase に保存できるフォーム
• 保存された画像の「置き場所の住所」（URL）をアプリで受け取る仕組み
• AIに機能追加を頼むときの、そのまま使えるプロンプト

• Supabase のプロジェクトがすでに作ってある（前のレッスン atom.web-builder.make-supabase-ai-ready 相当）
• ログイン機能（メール＋パスワード）が動いている
• Claude Code / Cursor / Codex CLI / ChatGPT のいずれかが手元で使える

1. 画像用の「物置」を1つ用意する

Supabase のダッシュボード（＝管理画面）を開き、左メニューの Storage を選びます。そこで「New bucket（＝新しい物置を作る）」を押して、名前を avatars にします。名前はあとで変えにくいので、わかりやすいものにしてください。

• 良い例: avatars、post-images（用途がひと目でわかる）
• 悪い例: test、bucket1（半年後の自分が泣きます）

公開／非公開の設定は、最初は Public（＝だれでも見られる） で構いません。個人情報を含む画像なら Private を選びます。

2. AIにアップロード部品を作ってもらう

あなたの使っているエディタ（Cursor や Claude Code）を開き、次のプロンプトをそのまま貼り付けます。

Next.js（App Router）で Supabase Storage の avatars バケットに画像をアップロードする React コンポーネントを作ってください。ファイル選択の input と、アップロード後の画像 URL 表示を含めてください。@supabase/supabase-js を使い、クライアントコンポーネントにしてください。エラー時はユーザーにわかる日本語で alert してください。

AIが出してきたコードは、そのまま受け入れず 「何をしているか日本語で説明して」 と追加で聞くと、読み解きの助けになります。

3. 画面で動かして確かめる

開発サーバーを立ち上げるコマンドは1行です。

pnpm dev

（＝手元のパソコンの中だけでアプリを動かすモードです。ブラウザで http://localhost:3000 を開くと確認できます）

フォームで画像を選び、アップロードボタンを押します。成功すると、Supabase の Storage 画面にあなたの画像が並んでいるはずです。

次の3つ全部が「はい」なら完了です。

1. Supabase の Storage 画面で、アップロードした画像ファイルが見えている
2. アップロード後にアプリ側で画像 URL が表示されている
3. その URL をブラウザの別タブで開くと、同じ画像が表示される

スクリーンショットを撮って残しておくと、あとで「ちゃんと動いた」の証拠になります。

• 「new row violates row-level security policy」と出る: バケットに対する権限（RLS＝行ごとのアクセス制御）が未設定です。AIに「この avatars バケットに、ログイン中ユーザーが insert できる policy を SQL で書いて」と頼むと解決します
• アップロードは成功するのに画像が表示されない: バケットが Private のままで、URL だけでは見られない状態です。Public に切り替えるか、署名付き URL（createSignedUrl）をAIに実装してもらいます
• ファイルサイズが大きすぎてエラー: Supabase のデフォルトは 50MB 上限。画像アップロード前にブラウザ側でリサイズするコードをAIに頼みましょう
• 同じファイル名で上書きされてしまう: ファイル名に Date.now() や crypto.randomUUID() を付けて一意にする改善をAIに依頼します

• 「アップロード中のローディング表示を追加して」
• 「画像をアップロードする前にプレビュー表示して」
• 「画像以外のファイルを選んだら警告を出して」

これらは全部、今日作ったコードを土台に、AIに1つずつ指示すれば追加できます。