必要なもの

• ` npm install @supabase/supabase-js `
• Project URL / Anon Key

例：ベース

supabase.js

import { createClient } from "@supabase/supabase-js";

export const supabase = createClient(
  process.env.NEXT_PUBLIC_SUPABASE_URL,
  process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY
);

page.jsx

"use client";
import { useEffect, useState } from "react";
import { supabase } from "@/src/lib/supabase";

const App = () => {
  const [countries, setCountries] = useState([]);

  useEffect(() => {
    getCountries();
  }, []);

  async function getCountries() {
    const { data } = await supabase.from("countries").select();
    setCountries(data);
  }

  return (
    <ul>
      {countries.map((country) => (
        <li key={country.name}>{country.name}</li>
      ))}
    </ul>
  );
};

export default App;

• "countries"の部分をテーブル名ごとに変える
• map内はテーブルで使っていない要素を書くと表示されなくなる

Docs：https://supabase.com/docs/guides/getting-started/quickstarts/reactjs

上手くいかない場合 :

上記Docsの手順で上手くいかない場合は URL or AnonKey が間違っていることが多い

基本形

select :

import { supabase } from "@/src/lib/supabase";
---
const { data, error } = await supabase
        .from("")
        .select("*");

delete :

const { error } = await supabase
          .from("")
          .delete()
          .eq("id", selectedItemId);

"id" この部分が対象の要素

insert :

const { data, error } = await supabase
      .from("")
      .insert([{ title, link, password }]);

id は自動で付与？

Storage

例：画像のUP

const handleImageUpload = async (e) => {
    const file = e.target.files[0];
    // Supabase Storageに画像をアップロード
    const { data, error } = await supabase.storage
      .from("test") // Storage名
      .upload(`images/${file.name}`, file); //Up先

<div className="h-44 bg-green-100">
        <input type="file" onChange={handleImageUpload} />
</div>

• UP出来ない場合は policy を決めていない場合

日付

最初は日付を使う目的が無くても、createdAt等を最初から作っておいた方がいい

後からソートできる

• typeでtimestampz、defaulvalueをnow()にする
• 途中からcolを追加すると現在の時間に。仕方ない？