Next.js App
    ↕ supabase-js（SDK）
Supabase
  ├── PostgreSQL（DB）
  ├── Auth（JWT）
  ├── Storage（S3互換）
  └── Realtime（WebSocket）

NEXT_PUBLIC_SUPABASE_URL=https://xxxx.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJh...
SUPABASE_SERVICE_ROLE_KEY=eyJh...  # ⚠️ NEXT_PUBLIC_ をつけない

# パッケージのインストール
npm install @supabase/supabase-js @supabase/ssr

# .env.local
NEXT_PUBLIC_SUPABASE_URL=https://xxxx.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=eyJh...
SUPABASE_SERVICE_ROLE_KEY=eyJh...

# Supabase CLIで型定義を自動生成（任意）
npx supabase gen types typescript --project-id xxxx > types/supabase.ts

ダッシュボード
├── Table Editor    : テーブルのCRUD操作（Notion風UI）
├── SQL Editor      : 生SQLを直接実行
├── Authentication  : ユーザー管理・認証プロバイダ設定
├── Storage         : バケット作成・ファイル管理
└── Project Settings
    ├── API         : URL・APIキーの確認
    └── Database    : 接続文字列（Prisma/Drizzle用）

CREATE TABLE posts (
  id UUID DEFAULT gen_random_uuid() PRIMARY KEY,
  user_id UUID REFERENCES auth.users(id),
  title TEXT NOT NULL,
  created_at TIMESTAMPTZ DEFAULT NOW()
);

-- RLSを有効化
ALTER TABLE posts ENABLE ROW LEVEL SECURITY;

-- ポリシー：自分の投稿のみ参照可
CREATE POLICY "自分の投稿のみ参照"
ON posts FOR SELECT
USING (auth.uid() = user_id);

-- ポリシー：自分の投稿のみ作成可
CREATE POLICY "自分の投稿のみ作成"
ON posts FOR INSERT
WITH CHECK (auth.uid() = user_id);

RLS ON + ポリシーなし → 全ブロック（0件返る）← 初心者がハマる
RLS ON + ポリシーあり → ポリシーに従ってアクセス制御
RLS OFF              → 全ユーザーが全データアクセス可（危険）

Authentication
├── Providers    : 認証方法の有効化
│   ├── Email    : メール/パスワード（デフォルトON）
│   ├── Google
│   ├── GitHub   など
└── URL Configuration
    ├── Site URL          : 本番URLを設定
    └── Redirect URLs     : 許可するリダイレクト先

// lib/supabase/client.ts（Clientコンポーネント用）
import { createBrowserClient } from '@supabase/ssr'

export const createClient = () =>
  createBrowserClient(
    process.env.NEXT_PUBLIC_SUPABASE_URL!,
    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
  )

// サインアップ
const { data, error } = await supabase.auth.signUp({
  email: 'user@example.com',
  password: 'password',
})

// ログイン
const { data, error } = await supabase.auth.signInWithPassword({
  email: 'user@example.com',
  password: 'password',
})

// ログアウト
const { error } = await supabase.auth.signOut()

Storage
└── New Bucket
    ├── Name          : バケット名（例: avatars）
    ├── Public        : ON → 誰でもURL直アクセス可
    │                   OFF → 署名付きURLが必要
    └── File size limit / Allowed MIME types（任意）

// アップロード
const { data, error } = await supabase.storage
  .from('avatars')
  .upload(`${userId}/avatar.png`, file, { upsert: true })

// 公開URLの取得（Publicバケットの場合）
const { data } = supabase.storage
  .from('avatars')
  .getPublicUrl(`${userId}/avatar.png`)

// 署名付きURL（Privateバケットの場合）
const { data } = await supabase.storage
  .from('avatars')
  .createSignedUrl(`${userId}/avatar.png`, 60) // 60秒有効

lib/supabase/
├── client.ts    # Clientコンポーネント用
└── server.ts    # Serverコンポーネント・Route Handler・Middleware用

// lib/supabase/client.ts
import { createBrowserClient } from '@supabase/ssr'

export const createClient = () =>
  createBrowserClient(
    process.env.NEXT_PUBLIC_SUPABASE_URL!,
    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
  )

// lib/supabase/server.ts
import { createServerClient } from '@supabase/ssr'
import { cookies } from 'next/headers'

export const createClient = async () => {
  const cookieStore = await cookies()
  return createServerClient(
    process.env.NEXT_PUBLIC_SUPABASE_URL!,
    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
    {
      cookies: {
        getAll: () => cookieStore.getAll(),
        setAll: (cookiesToSet) => {
          cookiesToSet.forEach(({ name, value, options }) =>
            cookieStore.set(name, value, options)
          )
        },
      },
    }
  )
}

// app/dashboard/page.tsx（Serverコンポーネント）
import { createClient } from '@/lib/supabase/server'
import { redirect } from 'next/navigation'

export default async function DashboardPage() {
  const supabase = await createClient()

  // ✅ 推奨: getUser()はJWTを毎回検証する
  const { data: { user }, error } = await supabase.auth.getUser()

  if (!user) {
    redirect('/login')
  }

  // DBクエリ（RLSポリシーがauth.uid()に基づいて自動フィルタリング）
  const { data: posts } = await supabase
    .from('posts')
    .select('*')

  return <div>{/* ... */}</div>
}

// ❌ 非推奨: getSession()はキャッシュされた値を返す場合がある
const { data: { session } } = await supabase.auth.getSession()

// middleware.ts
import { createServerClient } from '@supabase/ssr'
import { NextResponse, type NextRequest } from 'next/server'

export async function middleware(request: NextRequest) {
  let supabaseResponse = NextResponse.next({ request })

  const supabase = createServerClient(
    process.env.NEXT_PUBLIC_SUPABASE_URL!,
    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
    {
      cookies: {
        getAll() {
          return request.cookies.getAll()
        },
        setAll(cookiesToSet) {
          cookiesToSet.forEach(({ name, value }) =>
            request.cookies.set(name, value)
          )
          supabaseResponse = NextResponse.next({ request })
          cookiesToSet.forEach(({ name, value, options }) =>
            supabaseResponse.cookies.set(name, value, options)
          )
        },
      },
    }
  )

  // ⚠️ getUser()を必ず呼ぶこと。これがセッション更新をトリガーする
  const { data: { user } } = await supabase.auth.getUser()

  // 未認証ユーザーを/loginにリダイレクト（保護ルートの例）
  if (!user && request.nextUrl.pathname.startsWith('/dashboard')) {
    const url = request.nextUrl.clone()
    url.pathname = '/login'
    return NextResponse.redirect(url)
  }

  return supabaseResponse
}

export const config = {
  matcher: ['/((?!_next/static|_next/image|favicon.ico).*)'],
}

# Supabase CLIのインストール
npm install -g supabase

# ログイン
supabase login

# プロジェクトの初期化（初回のみ）
supabase init

# ローカル環境の起動（Docker必須）
supabase start

# 停止
supabase stop

# マイグレーションファイルの作成
supabase migration new create_posts_table

# ローカルDBにマイグレーションを適用
supabase db reset

# 本番DBにマイグレーションを適用
supabase db push

# 型定義ファイルの生成（ローカルから）
supabase gen types typescript --local > types/supabase.ts