2026年4月時点
プロジェクトの作成
new project
セキュリティのチェックはRLSオンを推奨
RLSとは？
「この人はこのデータ見ていい？」
というチェックをDB側で判定するセキュリティ機能。
・ログインした本人の日記だけ読める
・管理者だけ削除できる
・全員閲覧できるけど書き込み禁止
みたいな制限をDB自身が守ってくれる
→Create new project
プロジェクト作成には5分ほど時間がかかるかも。
STATUSがHealthyになったら正常起動。
| Status | 意味 |
|---|---|
| Healthy | 正常稼働 |
| Provisioning | 作成中・準備中 |
| Paused | スリープ中 |
| Restoring | 復旧中 |
| Updating | アップデート中 |
| Unhealthy | 異常状態 |
| Offline / Down | 停止中 |
テーブルを作る
Table Editor
Create a table
外部キー設定
Action if referenced row is updated
→Cascade
親IDが変わったら、子側も追従。
ただしUUIDのidは普通変えないので、お守りのようなもの。
Action if referenced row is removed
→Cascade
親IDを削除したら、その子側も一緒に削除。
データ投入
・CSVでインポートできる
・created_atをテーブルに持たせている場合、CSV上には記載しない
・idをtext型で持たせる場合は並び順に注意。
1,2,...ではOrderByした時に1,10...といった並びになってしまうので
001,002...などでレコードを登録する。
・テーブルを一括削除したい場合、親子テーブルの関係で削除できないことがあるので
以下SQLを流す。
truncate table parents;
↓
truncate table children, parents restart identity;
画面との連携方法
前提として、
・Supabaseアカウント作成済み
・プロジェクト作成済み
・テーブル/データ作成済み
次にNext.jsからSupabaseのデータを取得する方法
１.以下をコマンドプロンプトからインストール
npm install @supabase/supabase-js
２. Next.jsに環境変数を書く
プロジェクト直下に .env.local を作る。
NEXT_PUBLIC_SUPABASE_URL=自分のProject URL
NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY=自分の public key
ヘッダーのConnect>一番下の方のConnect your app>2 Add files
コピペ用の記載が載っています。
.env.local はGitにあげない！
３. Supabaseライブラリを入れる
npm install @supabase/supabase-js
４. Supabase clientを作る
import { createClient } from "@supabase/supabase-js";
export const supabase = createClient(
process.env.NEXT_PUBLIC_SUPABASE_URL!,
process.env.NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY!
);
５. データ取得関数を作る
lib/repositories/characters.ts
などの定義ファイルを作成してデータ取得関数を作成する
６. 画面で取得して表示する
７. RLS確認