编辑“︁Next.js与Supabase”︁

= Next.js与Supabase =

== 介绍 ==  
'''Supabase''' 是一个开源的 Firebase 替代品，提供 PostgreSQL 数据库、身份验证、即时 API 和存储等功能。在 '''Next.js''' 中集成 Supabase 可以快速构建全栈应用，无需单独配置后端服务器。本章将详细介绍如何在 Next.js 项目中使用 Supabase 进行数据管理、身份验证和实时订阅。

== 核心概念 ==  
Supabase 的核心组件包括：  
* '''PostgreSQL 数据库'''：关系型数据库，支持 SQL 查询和扩展。  
* '''Auth'''：基于 JWT 的身份验证系统。  
* '''Realtime API'''：通过 WebSocket 实现数据实时同步。  
* '''Storage'''：文件存储和管理。  

Next.js 的服务器组件（Server Components）和客户端组件（Client Components）均可与 Supabase 交互，但需注意安全性和性能优化。

== 安装与配置 ==  
1. 创建 Supabase 项目并获取 API 密钥：  
   - 访问 [https://supabase.com](https://supabase.com)（外部链接），注册并新建项目。  
   - 从项目设置中获取 `NEXT_PUBLIC_SUPABASE_URL` 和 `NEXT_PUBLIC_SUPABASE_ANON_KEY`。  

2. 在 Next.js 中安装 Supabase 客户端库：  
<syntaxhighlight lang="bash">  
npm install @supabase/supabase-js  
</syntaxhighlight>  

3. 创建 Supabase 客户端实例（`lib/supabase.ts`）：  
<syntaxhighlight lang="typescript">  
import { createClient } from '@supabase/supabase-js';  

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

export const supabase = createClient(supabaseUrl, supabaseKey);  
</syntaxhighlight>  

== 数据库操作 ==  
=== 查询数据 ===  
从 `todos` 表中获取所有任务：  
<syntaxhighlight lang="typescript">  
const { data, error } = await supabase  
  .from('todos')  
  .select('*');  

if (error) console.error('Error fetching todos:', error);  
else console.log('Todos:', data);  
</syntaxhighlight>  

=== 插入数据 ===  
向 `todos` 表添加新任务：  
<syntaxhighlight lang="typescript">  
const { data, error } = await supabase  
  .from('todos')  
  .insert([{ title: 'Learn Supabase', completed: false }]);  
</syntaxhighlight>  

=== 实时订阅 ===  
监听 `todos` 表的变更：  
<syntaxhighlight lang="typescript">  
const subscription = supabase  
  .channel('todos_changes')  
  .on('postgres_changes', { event: '*', schema: 'public', table: 'todos' }, (payload) => {  
    console.log('Change received!', payload);  
  })  
  .subscribe();  

// 取消订阅  
subscription.unsubscribe();  
</syntaxhighlight>  

== 身份验证 ==  
Supabase 支持多种登录方式（邮箱、社交账号等）。以下为邮箱登录示例：  
<syntaxhighlight lang="typescript">  
// 登录  
const { data, error } = await supabase.auth.signInWithPassword({  
  email: 'user@example.com',  
  password: 'password',  
});  

// 获取当前用户  
const { data: { user } } = await supabase.auth.getUser();  

// 登出  
await supabase.auth.signOut();  
</syntaxhighlight>  

== 实际案例 ==  
=== 任务管理应用 ===  
1. **功能需求**：  
   - 用户登录后查看任务列表。  
   - 实时同步任务状态变更。  

2. **实现步骤**：  
   - 使用 `supabase.auth` 处理用户认证。  
   - 通过 `supabase.from('todos').select()` 加载数据。  
   - 订阅 `postgres_changes` 事件更新 UI。  

<mermaid>  
sequenceDiagram  
    participant Client as Next.js 客户端  
    participant Supabase as Supabase API  
    Client->>Supabase: 登录 (signInWithPassword)  
    Supabase-->>Client: 返回 JWT  
    Client->>Supabase: 查询 todos 表  
    Supabase-->>Client: 返回任务列表  
    Client->>Supabase: 订阅变更  
    Supabase->>Client: 推送实时更新  
</mermaid>  

== 性能与安全 ==  
* '''性能优化'''：  
  - 使用服务端缓存（如 Next.js 的 `cache` 选项）减少重复查询。  
  - 限制订阅范围（如仅监听特定行变更）。  

* '''安全性'''：  
  - 启用 Row Level Security (RLS) 并编写策略：  
<syntaxhighlight lang="sql">  
CREATE POLICY "用户仅能管理自己的任务"  
ON todos FOR ALL USING (auth.uid() = user_id);  
</syntaxhighlight>  

== 总结 ==  
Next.js 与 Supabase 的集成简化了全栈开发流程，尤其适合需要快速迭代的项目。通过结合 Supabase 的实时能力和 Next.js 的渲染优化，开发者可以高效构建动态应用。  

== 参见 ==  
* [[Next.js学习路径结构|返回学习路径]]  
* [[PostgreSQL 基础]]（如需复习数据库知识）  

<!-- 注：实际内容需根据 Supabase API 最新版本调整 -->

[[Category:后端框架]]
[[Category:Next.js]]
[[Category:Next.js数据库集成]]