saas-mvp-launcher

SaaS MVP 启动器

概述

本技能将指导你以最短时间构建一个可投入生产的 SaaS MVP。它涵盖从想法验证、技术栈选择到身份验证、支付、数据库设计、部署和上线的一切内容 —— 使用现代且经过实战检验的工具。

何时使用本技能

• 从零开始启动一个新的 SaaS 产品时使用
• 需要为 Web 应用选择技术栈时使用
• 为 SaaS 设置身份验证、计费或数据库时使用
• 希望在上线前获得一份结构化的发布检查清单时使用
• 设计多租户应用的架构时使用
• 对现有的早期阶段 SaaS 进行技术审查时使用

分步指南

1. 先验证，再构建

在编写任何代码之前，先验证想法：

Validation checklist:
- [ ] Can you describe the problem in one sentence?
- [ ] Who is the exact customer? (not "everyone")
- [ ] What do they pay for today to solve this?
- [ ] Have you talked to 5+ potential customers?
- [ ] Will they pay $X/month for your solution?

规则： 如果你无法让 3 个人预付费用或签署意向书，就先不要构建。

2. 选择你的技术栈

推荐的现代 SaaS 技术栈（2026）：

层级	选择	原因
前端	Next.js 15 + TypeScript	全栈、出色的 DX、Vercel 部署
样式	Tailwind CSS + shadcn/ui	快速、可访问、可定制
后端	Next.js API Routes 或 tRPC	类型安全、同址部署
数据库	通过 Supabase 使用 PostgreSQL	可靠、可扩展、免费套餐
ORM	Prisma 或 Drizzle	类型安全查询、迁移
身份验证	Clerk 或 NextAuth.js	社交登录、会话管理
支付	Stripe	行业标准、文档出色
邮件	Resend + React Email	现代、对开发者友好
部署	Vercel（前端）+ Railway（后端）	零配置、快速 CI/CD
监控	Sentry + PostHog	错误跟踪 + 分析

3. 项目结构

my-saas/
├── app/                    # Next.js App Router
│   ├── (auth)/             # Auth routes (login, signup)
│   ├── (dashboard)/        # Protected app routes
│   ├── (marketing)/        # Public landing pages
│   └── api/                # API routes
├── components/
│   ├── ui/                 # shadcn/ui components
│   └── [feature]/          # Feature-specific components
├── lib/
│   ├── db.ts               # Database client (Prisma/Drizzle)
│   ├── stripe.ts           # Stripe client
│   └── email.ts            # Email client (Resend)
├── prisma/
│   └── schema.prisma       # Database schema
├── .env.local              # Environment variables
└── middleware.ts           # Auth middleware

4. 核心数据库 Schema（多租户 SaaS）

model User {
  id            String    @id @default(cuid())
  email         String    @unique
  name          String?
  createdAt     DateTime  @default(now())
  subscription  Subscription?
  workspaces    WorkspaceMember[]
}

model Workspace {
  id        String    @id @default(cuid())
  name      String
  slug      String    @unique
  plan      Plan      @default(FREE)
  members   WorkspaceMember[]
  createdAt DateTime  @default(now())
}

model Subscription {
  id                 String   @id @default(cuid())
  userId             String   @unique
  user               User     @relation(fields: [userId], references: [id])
  stripeCustomerId   String   @unique
  stripePriceId      String
  stripeSubId        String   @unique
  status             String   // active, canceled, past_due
  currentPeriodEnd   DateTime
}

model WorkspaceMember {
  userId      String
  workspaceId String
  user        User      @relation(fields: [userId], references: [id])
  workspace   Workspace @relation(fields: [workspaceId], references: [id])
  @@id([userId, workspaceId])
}

enum Plan {
  FREE
  PRO
  ENTERPRISE
}

5. 身份验证设置（Clerk）

// middleware.ts
import { clerkMiddleware, createRouteMatcher } from '@clerk/nextjs/server';

const isPublicRoute = createRouteMatcher([
  '/',
  '/pricing',
  '/blog(.*)',
  '/sign-in(.*)',
  '/sign-up(.*)',
  '/api/webhooks(.*)',
]);

export default clerkMiddleware(async (auth, req) => {
  if (!isPublicRoute(req)) {
    await auth.protect();
  }
});

export const config = {
  matcher: ['/((?!.*\\..*|_next).*)', '/', '/(api|trpc)(.*)'],
};

6. Stripe 集成（订阅）

// lib/stripe.ts
import Stripe from 'stripe';
export const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!, {
  apiVersion: '2025-01-27.acacia',
});

// Create checkout session
export async function createCheckoutSession(userId: string, priceId: string) {
  return stripe.checkout.sessions.create({
    mode: 'subscription',
    payment_method_types: ['card'],
    line_items: [{ price: priceId, quantity: 1 }],
    success_url: `${process.env.NEXT_PUBLIC_URL}/dashboard?success=true`,
    cancel_url: `${process.env.NEXT_PUBLIC_URL}/pricing`,
    metadata: { userId },
  });
}

7. 发布前检查清单

技术：

• 身份验证正常工作（注册、登录、登出、密码重置）
• 支付端到端正常工作（订阅、取消、升级）
• 已配置错误监控（Sentry）
• 已记录环境变量
• 已配置数据库备份
• API 路由上有速率限制
• 所有表单都使用 Zod 进行输入验证
• 强制启用 HTTPS，已设置安全标头

产品：

• 具有清晰价值主张的落地页
• 包含 2-3 个档位的定价页面
• 引导流程（5 分钟内实现首次价值）
• 邮件序列（欢迎、试用即将结束、支付失败）
• 服务条款和隐私政策页面
• 支持渠道（邮件 / 聊天）

营销：

• 已购买并配置域名
• 所有页面上都有 SEO 元标签
• 已安装 Google Analytics 或 PostHog
• 已创建社交媒体账号
• Product Hunt 草稿已准备好

最佳实践

• ✅ 要： 最多在 4-6 周内交付一个可用的 MVP，然后根据反馈迭代
• ✅ 要： 从第 1 天起就收费 —— 免费用户无法验证产品与市场的契合度
• ✅ 要： 先构建“顺利路径”，之后再处理边缘情况
• ✅ 要： 使用功能标志进行逐步发布（例如 Vercel Edge Config）
• ✅ 要： 从发布之日起就监控用户行为 —— 而不是等问题出现之后
• ❌ 不要： 在与客户交流之前就构建每一个功能
• ❌ 不要： 在达到 10k 美元 MRR 之前就为规模做优化
• ❌ 不要： 构建自定义身份验证系统 —— 使用 Clerk、Auth.js 或 Supabase Auth
• ❌ 不要： 跳过引导流程 —— 大多数 SaaS 正是在这里流失用户

故障排查

问题： 用户注册后未激活（未使用核心功能） 解决方案： 减少用户获得首次价值所需的步骤。使用 PostHog 跟踪用户在引导流程中的流失环节。

问题： 试用期后流失率高 解决方案： 添加退出调查。大多数用户流失是因为未感受到价值，而非价格。

问题： 本地未收到 Stripe webhook 事件 解决方案： 使用 Stripe CLI：stripe listen --forward-to localhost:3000/api/webhooks/stripe

问题： 生产环境中的数据库迁移失败 解决方案： 在生产环境中始终运行 prisma migrate deploy（而非 prisma migrate dev）。

限制

• 仅当任务明确符合上述范围时，才使用此技能。
• 不要将输出视为环境特定验证、测试或专家审查的替代品。
• 如果缺少必要的输入、权限、安全边界或成功标准，请停止并请求澄清。

这些示例只是起点，并非生产环境安全实现。应从经过身份验证的服务器会话中推导 userId/工作区成员身份，根据服务器持有的允许列表验证价格 ID，并使用 Stripe 测试模式密钥。仅根据已验证签名且以幂等方式处理的 webhook 事件授予权益，绝不要根据成功 URL 授予。租户成员身份/架构本身无法强制执行租户授权。上线前保留关键故障、支付和恢复路径；上述时间/收入/预付款门槛只是规划启发式参考，并非通用的发布决策规则。固定兼容的 SDK/API 版本，并验证已部署的 Clerk 集成。