投稿機能

"use client";

import { useState } from "react";
import { supabase } from "@/lib/supabaseClient";

const Post = () => {
  const [title, setTitle] = useState("");
  const [content, setContent] = useState("");
  const [image, setImage] = useState(null);

  const handleSubmit = async (e) => {
    e.preventDefault();
    try {
      // 画像をSupabase Storageにアップロード
      const { data, error } = await supabase.storage
        .from("test")
        .upload(`images/${image.name}`, image);

      // 記事をSupabaseに追加
      const { data: postData, error: postError } = await supabase
        .from("posts")
        .insert([{ title, content }]);
      if (postError) {
        throw postError;
      }

      // 成功したらフォームをリセット
      setTitle("");
      setContent("");
      setImage(null);
    } catch (error) {
      console.error("Error adding post:", error.message);
    }
  };

  return (
    <div>
      <h1>New Post</h1>
      <form onSubmit={handleSubmit}>
        <label>
          Title:
          <input
            type="text"
            value={title}
            onChange={(e) => setTitle(e.target.value)}
          />
        </label>
        <label>
          Content:
          <textarea
            value={content}
            onChange={(e) => setContent(e.target.value)}
          />
        </label>
        <label>
          Image:
          <input type="file" onChange={(e) => setImage(e.target.files[0])} />
        </label>
        <button type="submit">Submit</button>
      </form>
    </div>
  );
};

export default Post;

• supabase では文字情報をdatabase , 画像を storageで保存する
• handleSubmit関数で一度に、画像は upload / title , contentはinsert でdatabaseに保存