Supabase：Claude Code 实战指南

Supabase とは

Supabaseはオープンソースの后端プラット表单です。PostgreSQL数据库、认证、实时サブスクリプション、存储を集成的に提供します。借助 Claude Code，Supabaseの每个機能を高效地实现可以。

セットアップ

// lib/supabase.ts
import { createClient } from "@supabase/supabase-js";
import type { Database } from "./database.types";

const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL!;
const supabaseAnonKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!;

export const supabase = createClient<Database>(
  supabaseUrl,
  supabaseAnonKey
);

// 服务器サイド用（Service Role Key）
export function createServerClient() {
  return createClient<Database>(
    supabaseUrl,
    process.env.SUPABASE_SERVICE_ROLE_KEY!,
    { auth: { persistSession: false } }
  );
}

认证

// メール/密码认证
async function signUp(email: string, password: string) {
  const { data, error } = await supabase.auth.signUp({
    email,
    password,
    options: {
      data: { display_name: email.split("@")[0] },
    },
  });

  if (error) throw error;
  return data;
}

async function signIn(email: string, password: string) {
  const { data, error } = await supabase.auth.signInWithPassword({
    email,
    password,
  });

  if (error) throw error;
  return data;
}

// OAuth认证
async function signInWithGitHub() {
  const { data, error } = await supabase.auth.signInWithOAuth({
    provider: "github",
    options: {
      redirectTo: `${window.location.origin}/auth/callback`,
    },
  });

  if (error) throw error;
  return data;
}

// 认证状態の監視
supabase.auth.onAuthStateChange((event, session) => {
  if (event === "SIGNED_IN") {
    console.log("Signed in:", session?.user.email);
  } else if (event === "SIGNED_OUT") {
    console.log("Signed out");
  }
});

数据库CRUD

// 类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类类型安全な查询
async function getPosts(params: {
  page?: number;
  category?: string;
}) {
  const { page = 1, category } = params;
  const perPage = 20;

  let query = supabase
    .from("posts")
    .select(`
      id,
      title,
      content,
      published_at,
      author:users(id, name, avatar),
      categories(id, name, slug)
    `, { count: "exact" })
    .eq("published", true)
    .order("published_at", { ascending: false })
    .range((page - 1) * perPage, page * perPage - 1);

  if (category) {
    query = query.contains("categories", [{ slug: category }]);
  }

  const { data, error, count } = await query;

  if (error) throw error;
  return { posts: data, total: count };
}

// 挿入
async function createPost(post: {
  title: string;
  content: string;
}) {
  const { data: { user } } = await supabase.auth.getUser();
  if (!user) throw new Error("Not authenticated");

  const { data, error } = await supabase
    .from("posts")
    .insert({
      title: post.title,
      content: post.content,
      author_id: user.id,
    })
    .select()
    .single();

  if (error) throw error;
  return data;
}

实时サブスクリプション

import { useEffect, useState } from "react";

function useRealtimeComments(postId: string) {
  const [comments, setComments] = useState<Comment[]>([]);

  useEffect(() => {
    // 初期数据获取
    supabase
      .from("comments")
      .select("*, author:users(name, avatar)")
      .eq("post_id", postId)
      .order("created_at")
      .then(({ data }) => setComments(data || []));

    // 实时購読
    const channel = supabase
      .channel(`comments:${postId}`)
      .on(
        "postgres_changes",
        {
          event: "INSERT",
          schema: "public",
          table: "comments",
          filter: `post_id=eq.${postId}`,
        },
        async (payload) => {
          // 作者情報を获取
          const { data } = await supabase
            .from("users")
            .select("name, avatar")
            .eq("id", payload.new.author_id)
            .single();

          setComments((prev) => [
            ...prev,
            { ...payload.new, author: data },
          ]);
        }
      )
      .subscribe();

    return () => {
      supabase.removeChannel(channel);
    };
  }, [postId]);

  return comments;
}

存储

async function uploadAvatar(file: File, userId: string) {
  const ext = file.name.split(".").pop();
  const path = `avatars/${userId}.${ext}`;

  const { error: uploadError } = await supabase.storage
    .from("profiles")
    .upload(path, file, {
      upsert: true,
      contentType: file.type,
    });

  if (uploadError) throw uploadError;

  const { data } = supabase.storage
    .from("profiles")
    .getPublicUrl(path);

  // プロフィールを更新
  await supabase
    .from("users")
    .update({ avatar: data.publicUrl })
    .eq("id", userId);

  return data.publicUrl;
}

Row Level Security

-- RLSポリシーの設定
ALTER TABLE posts ENABLE ROW LEVEL SECURITY;

-- 公開済み記事は誰でも閲覧可
CREATE POLICY "Public posts are viewable by everyone"
ON posts FOR SELECT
USING (published = true);

-- 自分の記事のみEdit可
CREATE POLICY "Users can update own posts"
ON posts FOR UPDATE
USING (auth.uid() = author_id);

-- 認証済みユーザーのみ作成可
CREATE POLICY "Authenticated users can create posts"
ON posts FOR INSERT
WITH CHECK (auth.uid() = author_id);

通过 Claude Codeの活用

Supabase开发を让 Claude Code依頼する例です。认证相关内容请参阅OAuth认证の实现、数据库设计はPrisma ORM完全指南也请参阅。

Supabaseでブログアプリのバックエンドを構築して。
- 認証: メール/パスワード + GitHub OAuth
- テーブル: users, posts, comments, categories
- RLSポリシーの設定
- リアルタイムコメント機能
- 画像アップロード機能

Supabase的详细信息请参阅Supabase官方文档。Claude Codeの使い方は官方文档中可以查看。

总结

Supabaseは认证から数据库、实时までを集成的に提供するプラット表单です。借助 Claude Code，每个機能の实现を高效地進め、全栈应用を快速构建可以。