Next.js + Supabase + Stripe 搭建独立站开发指南

前端小小栈
0 阅读3分钟

“独立站”通常指独立部署的网站，尤其是带有会员订阅、付费功能（如SaaS、付费内容或电商）的独立网站。使用 Next.js（前端框架）、Supabase（认证 + 数据库 + 存储）和 Stripe（支付订阅）是目前最流行、最高效的现代栈组合，尤其适合快速构建订阅制独立站。

以下是完整开发指南（基于2026年最新实践，使用 Next.js App Router）。推荐优先使用现成 Starter Kit，能节省大量时间。

1. 推荐 Starter Kit（最快上手方式）

直接克隆高质量开源模板，几乎开箱即用，支持认证、订阅支付、Webhook 同步等。

  • 最佳推荐：KolbySisk/next-supabase-stripe-starter
    GitHub: github.com/KolbySisk/n…
    特点：Next.js App Router + Supabase + Stripe + shadcn/ui 美观组件。包含完整订阅流程、客户门户、Webhook 自动同步产品/订阅到 Supabase 数据库。
    上手步骤：

    1. git clone https://github.com/KolbySisk/next-supabase-stripe-starter.git
    2. 创建 Supabase 项目，获取 URL 和 anon key。
    3. 创建 Stripe 账号，获取 secret key 和 webhook secret。
    4. 配置 .env.local（模板里有示例）。
    5. 运行 Supabase migration 创建表。
    6. 使用 Stripe CLI 或 fixtures.json 导入测试产品。
    7. bun dev（或 npm）启动，测试登录 + 订阅流程。

  • Vercel 官方模板：nextjs-subscription-payments
    GitHub: github.com/vercel/next…
    特点：Vercel 出品，一键部署，支持 Stripe 订阅 + Supabase 同步。适合直接部署到 Vercel。

  • 其他选项：

使用这些模板，能在几小时内搭建一个完整的付费独立站原型。

2. 从零手动搭建步骤

如果想自己从头搭建（学习目的），流程如下：

步骤1: 创建项目

npx create-next-app@latest my-saas-site --typescript --tailwind --app --eslint
cd my-saas-site
npm install @supabase/supabase-js @supabase/ssr stripe

步骤2: 配置 Supabase（认证 + 数据库）

  1. 去 supabase.com 创建项目，获取：
    • NEXT_PUBLIC_SUPABASE_URL
    • NEXT_PUBLIC_SUPABASE_ANON_KEY
    • Service Role Key（用于服务器端）
  2. 在 Supabase Dashboard 的 SQL Editor 运行 Stripe Subscriptions 模板（Quick starts → Stripe Subscriptions），自动创建所需表（products、prices、customers、subscriptions 等）。
  3. 配置认证：在 app/auth 文件夹创建登录/注册页面，使用 @supabase/ssr 处理服务器端认证（参考官方文档：supabase.com/docs/guides…

步骤3: 配置 Stripe（支付订阅）

  1. 去 stripe.com 创建账号，获取：
    • STRIPE_SECRET_KEY
    • STRIPE_WEBHOOK_SECRET
  2. 在 Stripe Dashboard 创建产品和价格（Products → Add product）。
  3. 创建 Checkout Session（服务器端 Route Handler）：
    • 在 app/api/create-checkout-session/route.ts 中使用 Stripe SDK 创建 session，并关联当前 Supabase 用户的 customer ID。
  4. 客户门户：创建 /api/create-portal-session 用于管理订阅。

步骤4: 处理 Webhook（关键：同步 Stripe 数据到 Supabase）

  • 创建 app/api/webhooks/stripe/route.ts
  • 使用 Stripe CLI 本地测试：stripe listen --forward-to localhost:3000/api/webhooks/stripe
  • Webhook 处理事件如 checkout.session.completed、customer.subscription.updated，更新 Supabase 的 subscriptions 表。
  • 推荐使用 Supabase Edge Functions 处理 webhook（更安全）：参考 supabase.com/docs/guides…

步骤5: 前端集成

  • 定价页面：从 Supabase 查询 products/prices 显示卡片。
  • 按钮点击 → 调用服务器 API 创建 Checkout Session → 重定向到 Stripe Checkout。
  • 保护路由：使用 Middleware 检查 Supabase session 和订阅状态。

步骤6: 部署

  • 推荐 Vercel（Next.js 官方，一键部署，支持环境变量）。
  • 配置生产环境变量，设置 Stripe Webhook 指向生产 URL。

3. 关键注意事项

  • 安全：永远不要在客户端暴露 Stripe Secret Key 或 Supabase Service Role Key。
  • 测试：使用 Stripe 测试卡（4242 4242 4242 4242），本地用 Stripe CLI 转发 webhook。
  • RLS（Row Level Security）：在 Supabase 启用 RLS，确保用户只能访问自己的订阅数据。
  • 常见问题：Webhook 签名验证失败 → 确保读取 raw body；订阅不同步 → 检查事件监听列表（至少包括 checkout.session.completed、invoice.paid 等）。
  • 扩展：添加邮箱验证、OAuth（Google/GitHub）、存储文件等，都在 Supabase 内轻松实现。

这个栈非常成熟，适合个人开发者快速推出付费独立站（如工具站、内容站、AI SaaS）。

avatar
文章
阅读
粉丝