技术实现

技术栈选择

2025 年构建 SaaS 应用，推荐以下技术栈：

推荐方案：Next.js 全栈

层级	技术	理由
前端框架	Next.js 14+	App Router、Server Components、流式渲染
UI 组件	shadcn/ui	可定制、无依赖、复制粘贴使用
样式	Tailwind CSS	原子化 CSS，开发效率高
数据库	PostgreSQL	可靠、功能强大、生态成熟
ORM	Prisma / Drizzle	类型安全、开发体验好
部署	Vercel / Railway	一键部署、自动扩展

为什么选 Next.js

Next.js 在 2025 年仍然是 SaaS 开发的首选：

1. 全栈能力：前后端一体，减少复杂度
2. Server Components：默认服务端渲染，性能更好
3. App Router：更直观的路由系统
4. Edge Runtime：支持边缘计算，全球加速
5. 生态丰富：认证、支付、数据库都有成熟方案

项目结构

my-saas/
├── app/                    # Next.js App Router
│   ├── (auth)/            # 认证相关页面组
│   │   ├── login/
│   │   └── register/
│   ├── (dashboard)/       # 仪表盘页面组
│   │   ├── layout.tsx
│   │   └── page.tsx
│   ├── (marketing)/       # 营销页面组
│   │   ├── page.tsx       # 首页
│   │   └── pricing/
│   ├── api/               # API 路由
│   │   └── webhooks/
│   └── layout.tsx         # 根布局
├── components/            # 可复用组件
│   ├── ui/               # shadcn/ui 组件
│   └── shared/           # 业务组件
├── lib/                   # 工具函数
│   ├── db.ts             # 数据库连接
│   ├── auth.ts           # 认证配置
│   └── utils.ts          # 通用工具
├── prisma/               # 数据库 schema
│   └── schema.prisma
└── public/               # 静态资源

初始化项目

1. 创建 Next.js 项目

npx create-next-app@latest my-saas --typescript --tailwind --eslint --app
cd my-saas

2. 安装核心依赖

# UI 组件
npx shadcn@latest init
npx shadcn@latest add button card input form

# 数据库
pnpm add prisma @prisma/client
pnpm add -D prisma

# 工具库
pnpm add zod date-fns lucide-react

3. 配置数据库

创建 prisma/schema.prisma：

generator client {
  provider = "prisma-client-js"
}

datasource db {
  provider = "postgresql"
  url      = env("DATABASE_URL")
}

model User {
  id        String   @id @default(cuid())
  email     String   @unique
  name      String?
  image     String?
  createdAt DateTime @default(now())
  updatedAt DateTime @updatedAt

  subscription Subscription?
}

model Subscription {
  id                 String   @id @default(cuid())
  userId             String   @unique
  user               User     @relation(fields: [userId], references: [id])
  stripeCustomerId   String?  @unique
  stripePriceId      String?
  stripeSubscriptionId String? @unique
  status             String   @default("inactive")
  currentPeriodEnd   DateTime?
  createdAt          DateTime @default(now())
  updatedAt          DateTime @updatedAt
}

初始化数据库：

npx prisma generate
npx prisma db push

核心功能实现

1. 数据库连接

创建 lib/db.ts：

import { PrismaClient } from '@prisma/client'

const globalForPrisma = globalThis as unknown as {
  prisma: PrismaClient | undefined
}

export const db = globalForPrisma.prisma ?? new PrismaClient()

if (process.env.NODE_ENV !== 'production') {
  globalForPrisma.prisma = db
}

2. Server Actions

Next.js 14 推荐使用 Server Actions 处理表单和数据操作：

// app/actions/user.ts
'use server'

import { db } from '@/lib/db'
import { revalidatePath } from 'next/cache'

export async function updateUserName(userId: string, name: string) {
  await db.user.update({
    where: { id: userId },
    data: { name }
  })

  revalidatePath('/dashboard/settings')
}

3. API 路由

对于需要 REST API 的场景：

// app/api/users/route.ts
import { db } from '@/lib/db'
import { NextResponse } from 'next/server'

export async function GET() {
  const users = await db.user.findMany()
  return NextResponse.json(users)
}

export async function POST(request: Request) {
  const body = await request.json()

  const user = await db.user.create({
    data: {
      email: body.email,
      name: body.name
    }
  })

  return NextResponse.json(user, { status: 201 })
}

AI 辅助开发

使用 Claude Code / Cursor

2025 年，AI 编程工具已经成为标配。

开发流程：

1. 描述需求：用自然语言描述你要实现的功能
2. 生成代码：AI 生成初始代码
3. 审查修改：检查代码逻辑和安全性
4. 测试验证：确保功能正常

示例对话：

我需要一个用户设置页面，包含：
1. 修改用户名的表单
2. 修改头像的上传功能
3. 删除账户的危险操作区

使用 shadcn/ui 组件，Server Actions 处理表单提交。

代码审查提示词

请审查这段代码，检查：
1. 安全漏洞（SQL 注入、XSS 等）
2. 性能问题
3. 错误处理是否完善
4. 代码是否符合最佳实践

[粘贴代码]

开发最佳实践

1. 类型安全

使用 TypeScript 和 Zod 确保类型安全：

import { z } from 'zod'

const userSchema = z.object({
  email: z.string().email(),
  name: z.string().min(2).max(50),
})

type User = z.infer<typeof userSchema>

2. 错误处理

统一的错误处理模式：

// lib/errors.ts
export class AppError extends Error {
  constructor(
    message: string,
    public statusCode: number = 500
  ) {
    super(message)
  }
}

// 使用
throw new AppError('用户不存在', 404)

3. 环境变量

使用 .env.local 管理敏感配置：

DATABASE_URL="postgresql://..."
NEXTAUTH_SECRET="your-secret"
STRIPE_SECRET_KEY="sk_..."

下一步

核心功能实现后，添加用户认证系统。

继续：用户系统 →

---

← 返回产品设计 | 返回项目五