Cheeeliy
返回文章列表
技术#Supabase#Next.js#全栈

用 Supabase + Next.js 搭建全栈应用的最佳实践

2025-04-10 10:00:003 分钟阅读

为什么选择 Supabase


在做小野旅行时,我需要一个能快速搭建后端的方案。Supabase 提供了:


  • PostgreSQL 数据库
  • 实时订阅
  • 认证系统
  • 存储服务
  • Edge Functions

  • 这意味着我不需要自己搭建任何后端服务。


    数据库设计原则


    好的数据库设计是应用成功的基础。花时间在 schema 设计上,后面会省很多事。


    ### 1. 善用 PostgreSQL 特性


    PostgreSQL 不只是一个关系数据库,它还有很多强大的特性:


  • **JSONB** - 灵活存储半结构化数据
  • **Array** - 标签、技术栈等列表数据
  • **全文搜索** - 内置的搜索引擎
  • **触发器** - 自动更新时间戳、计算阅读时间

  • ### 2. RLS 策略设计


    Row Level Security 是 Supabase 的核心安全机制:


    -- 公开读取已发布内容

    CREATE POLICY "Public read" ON posts

    FOR SELECT USING (published = true);


    -- 管理员完全控制

    CREATE POLICY "Admin all" ON posts

    FOR ALL USING (auth.uid() = admin_id);


    ### 3. 性能优化


  • 为常用查询字段创建索引
  • 使用 select 只获取需要的字段
  • 合理使用 .single() 和 .maybeSingle()

  • Next.js 集成


    Supabase 提供了 `@supabase/ssr` 包,完美支持 Next.js 的服务端渲染:


  • Server Component 使用服务端客户端
  • Client Component 使用浏览器客户端
  • API Routes 可使用 Service Role 客户端

  • 这种架构保证了安全性和性能的平衡。