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 密钥：

  - 访问 [1](https://supabase.com)（外部链接），注册并新建项目。  
  - 从项目设置中获取 `NEXT_PUBLIC_SUPABASE_URL` 和 `NEXT_PUBLIC_SUPABASE_ANON_KEY`。  

2. 在 Next.js 中安装 Supabase 客户端库：

  
npm install @supabase/supabase-js

3. 创建 Supabase 客户端实例（`lib/supabase.ts`）：

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

数据库操作

查询数据

从 `todos` 表中获取所有任务：

  
const { data, error } = await supabase  
  .from('todos')  
  .select('*');  

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

插入数据

向 `todos` 表添加新任务：

  
const { data, error } = await supabase  
  .from('todos')  
  .insert([{ title: 'Learn Supabase', completed: false }]);

实时订阅

监听 `todos` 表的变更：

  
const subscription = supabase  
  .channel('todos_changes')  
  .on('postgres_changes', { event: '*', schema: 'public', table: 'todos' }, (payload) => {  
    console.log('Change received!', payload);  
  })  
  .subscribe();  

// 取消订阅  
subscription.unsubscribe();

身份验证

Supabase 支持多种登录方式（邮箱、社交账号等）。以下为邮箱登录示例：

  
// 登录  
const { data, error } = await supabase.auth.signInWithPassword({  
  email: 'user@example.com',  
  password: 'password',  
});  

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

// 登出  
await supabase.auth.signOut();

实际案例

任务管理应用

1. **功能需求**：

  - 用户登录后查看任务列表。  
  - 实时同步任务状态变更。  

2. **实现步骤**：

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

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: 推送实时更新

性能与安全

• 性能优化：

 - 使用服务端缓存（如 Next.js 的 `cache` 选项）减少重复查询。  
 - 限制订阅范围（如仅监听特定行变更）。  

• 安全性：

 - 启用 Row Level Security (RLS) 并编写策略：  

  
CREATE POLICY "用户仅能管理自己的任务"  
ON todos FOR ALL USING (auth.uid() = user_id);

总结

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

参见

• 返回学习路径
• PostgreSQL 基础（如需复习数据库知识）