SupabaseはFirebaseの最強代替ツール
SupabaseはFirebaseのオープンソース代替として急速に人気を集めているBaaS（Backend as a Service）です。PostgreSQLをベースにしており、Firebase同様にデータベース・認証・ストレージ・リアルタイム機能・Edge Functionsを提供しています。
| 項目 | Supabase | Firebase |
|---|---|---|
| DB | PostgreSQL（SQL・JOIN・トランザクション） | Firestore（NoSQL） |
| ライセンス | オープンソース・セルフホスティング可 | Google管理のマネージド |
| セキュリティ | Row Level Security（SQLポリシー） | Security Rules |
| API自動生成 | REST + GraphQL + Realtime | SDK経由（GraphQLなし） |
| 無料枠 | 500MB DB・50K MAU・1GBストレージ・2プロジェクト | 1GB DB・50K読込/日 など |
Supabaseのセットアップ（5分でできる）
Supabaseプロジェクトの作成からNext.jsへの統合手順を解説します。
| Step | 作業 | 備考 |
|---|---|---|
| 1 | プロジェクト作成 | supabase.com → New Project → DBパスワード設定 |
| 2 | Next.jsへ統合 | npm i @supabase/supabase-js @supabase/ssr |
| 3 | 環境変数 | NEXT_PUBLIC_SUPABASE_URL / ANON_KEY を .env.local |
| 4 | クライアント作成 | utils/supabase/client.ts に作成して各コンポーネントから import |
Supabase Authによるユーザー認証の実装
Supabase Authはメール/パスワード・OAuth（Google・GitHub等）・マジックリンク・SMSによる認証を簡単に実装できます。
Next.js App Routerでの認証実装ポイント：
・@supabase/ssr パッケージを使ってサーバーサイドでのCookieベースセッション管理を実装
・middleware.tsでルート保護を設定（認証なしでアクセスできるページを制限）
・Server ComponentsでSupabaseのセッションを確認してユーザー情報を取得
ソーシャルログインの設定：SupabaseダッシュボードのAuthentication→Providers でGoogleやGitHubなどのOAuthプロバイダーを有効化。OAuthアプリの設定（GoogleはGoogle Cloud Console等）をするだけで実装完了です。
Supabaseデータベース・Row Level Securityの活用
SupabaseのデータベースはPostgreSQLをフル活用できます。特に重要なRow Level Security（RLS）の設定方法を解説します。
Row Level Security（RLS）とは：データベーステーブルへのアクセスをユーザーごとに行レベルで制御する機能です。「自分のデータしか読み書きできない」というセキュリティポリシーをSQL文で定義できます。
RLSの基本的な設定例：
① テーブルのRLSを有効化（ALTER TABLE notes ENABLE ROW LEVEL SECURITY）
② ポリシーを作成：「認証済みユーザーは自分のuser_idと一致するレコードのみSELECT可能」というポリシーをSupabase ダッシュボードまたはSQLで設定
Supabaseのリアルタイム機能・ストレージの活用
Supabaseはリアルタイム機能とファイルストレージも提供しています。
リアルタイムサブスクリプション：
supabase.channel('messages').on('postgres_changes', { event: 'INSERT', schema: 'public', table: 'messages' }, callback).subscribe() のように書くと、テーブルへのINSERT・UPDATE・DELETEをリアルタイムでフロントエンドに届けられます。チャット・通知機能の実装に活用できます。
Supabase Storage：
画像・動画・ファイルのアップロード・管理ができます。バケット単位でのアクセス制御・画像変換（Transformations）機能も備えています。
