Supabase 概要まとめ

npm install @supabase/supabase-js @supabase/ssr

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()