オープンソースの Firebase 代替 BaaS(Backend as a Service)
Supabase は PostgreSQL をコアに置いたオープンソースの BaaS です。アプリ開発に必要なバックエンド機能(認証・DB・ストレージ・リアルタイム通信など)をワンストップで提供します。Next.js との相性がよく、Next.js + Supabase + Vercel の構成は非常にポピュラーです。
@supabase/ssr)が整備済みpgvector 拡張を内蔵| プラン | 月額 | 主な内容 |
|---|---|---|
| Free | $0 | DB 500MB、帯域 5GB、2プロジェクトまで |
| Pro | $25/月 | DB 8GB〜、帯域 250GB、プロジェクト数無制限 |
| Team | $599/月〜 | SSO、高度なサポート、SLA |
| Enterprise | 要相談 | カスタム構成 |
⚠️ Free プランのプロジェクトは 1週間非アクティブで一時停止されます(Pro 以上は停止なし)。
| Supabase | Firebase | PlanetScale | Neon | |
|---|---|---|---|---|
| DB | PostgreSQL | NoSQL (Firestore) | MySQL | PostgreSQL |
| オープンソース | ✅ | ❌ | ❌ | ✅ |
| Auth 内蔵 | ✅ | ✅ | ❌ | ❌ |
| Realtime | ✅ | ✅ | ❌ | ❌ |
| SQL が使える | ✅ | ❌ | ✅ | ✅ |
| Self-host 可 | ✅ | ❌ | ❌ | 一部 |
Firebase との最大の違いは「SQL が使えて RLS で制御できる」点。PlanetScale・Neon との違いは「Auth / Storage / Realtime が統合されている」点です。
npm install @supabase/supabase-js @supabase/ssr
.env.local)NEXT_PUBLIC_SUPABASE_URL=https://xxxx.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key
# サーバーサイド専用(RLS バイパスなど)
SUPABASE_SERVICE_ROLE_KEY=your-service-role-key
// utils/supabase/client.ts(ブラウザ用)
import { createBrowserClient } from '@supabase/ssr'
export function createClient() {
return createBrowserClient(
process.env.NEXT_PUBLIC_SUPABASE_URL!,
process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
)
}
// utils/supabase/server.ts(サーバーコンポーネント用)
import { createServerClient } from '@supabase/ssr'
import { cookies } from 'next/headers'
export async function createClient() {
const cookieStore = await cookies()
return createServerClient(
process.env.NEXT_PUBLIC_SUPABASE_URL!,
process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
{
cookies: {
getAll() { return cookieStore.getAll() },
setAll(cookiesToSet) {
cookiesToSet.forEach(({ name, value, options }) =>
cookieStore.set(name, value, options)
)
},
},
}
)
}
const supabase = createClient()
// SELECT
const { data, error } = await supabase
.from('posts')
.select('*')
.eq('user_id', userId)
// INSERT
const { error } = await supabase
.from('posts')
.insert({ title: 'Hello', user_id: userId })
// サインイン
await supabase.auth.signInWithPassword({ email, password })
// サインアップ
await supabase.auth.signUp({ email, password })
// サインアウト
await supabase.auth.signOut()
// セッション取得
const { data: { session } } = await supabase.auth.getSession()
anon キーはクライアントに公開してよい — RLS で守られているため安全。service_role キーは絶対にクライアントに渡さない。supabase start でローカル環境を立ち上げられる。