快速上手Next.js SaaS应用开发：Postgres、Stripe与shadcn/ui的完美结合

在当今的互联网时代，SaaS（软件即服务）应用的需求日益增长。无论是初创公司还是大型企业，都需要一个高效、可扩展且易于维护的应用架构。今天，我们将介绍一个基于Next.js的SaaS应用模板，它集成了Postgres数据库、Stripe支付系统以及shadcn/ui UI库，帮助你快速搭建一个功能齐全的SaaS应用。

项目背景

2020年，开发者Lee Robinson曾推出了一门名为“React 2025”的课程，展示了如何使用Next.js、Stripe等工具构建一个SaaS应用。如今，随着React 19的发布，许多新特性如useActionState、React Server Actions等，极大地简化了开发流程。这个项目正是基于这些最新技术，展示了如何利用React和Next.js的最新模式来构建一个现代化的SaaS应用。

项目亮点

1. 功能丰富的SaaS模板

这个模板不仅仅是一个简单的启动项目，它包含了以下核心功能：

• 营销落地页：带有动画效果的终端元素，吸引用户眼球。
• 定价页面：与Stripe Checkout无缝集成，支持订阅支付。
• 用户仪表盘：支持用户和团队的增删改查操作。
• 角色权限管理：提供Owner和Member两种角色，支持基本的RBAC（基于角色的访问控制）。
• 订阅管理：通过Stripe Customer Portal管理用户的订阅状态。
• 用户认证：支持邮箱/密码登录，JWT存储在Cookie中。
• 全局中间件：保护登录后的路由，确保安全性。
• 本地中间件：保护Server Actions或验证Zod模式。
• 活动日志系统：记录用户的所有操作，便于追踪和分析。

2. 技术栈

• 框架：Next.js：一个基于React的框架，支持服务器端渲染和静态生成。
• 数据库：Postgres：一个强大的开源关系型数据库。
• ORM：Drizzle：一个轻量级的ORM工具，简化数据库操作。
• 支付系统：Stripe：全球领先的在线支付解决方案。
• UI库：shadcn/ui：一个现代化的UI组件库，提供丰富的UI元素。

快速开始

1. 克隆项目

首先，你需要将项目克隆到本地：

git clone https://github.com/leerob/next-saas-starter
cd next-saas-starter
pnpm install

2. 配置环境变量

使用项目自带的脚本生成.env文件：

pnpm db:setup

3. 数据库迁移与数据填充

接下来，运行数据库迁移并填充默认的用户和团队数据：

pnpm db:migrate
pnpm db:seed

这将创建一个默认用户：

• 邮箱：test@test.com
• 密码：admin123

当然，你也可以通过/sign-up页面创建新的用户。

4. 启动开发服务器

最后，启动Next.js开发服务器：

pnpm dev

打开浏览器，访问http://localhost:3000，你将看到应用正在运行。

5. 测试支付功能

为了测试Stripe支付功能，你可以使用以下测试卡信息：

• 卡号：4242 4242 4242 4242
• 有效期：任意未来的日期
• CVC：任意3位数字

部署到生产环境

当你准备好将应用部署到生产环境时，可以按照以下步骤操作：

1. 设置生产环境的Stripe Webhook

1. 登录Stripe Dashboard，创建一个新的Webhook。
2. 将Webhook的URL设置为你的生产环境API路由（例如：https://yourdomain.com/api/stripe/webhook）。
3. 选择你想要监听的事件（例如：checkout.session.completed、customer.subscription.updated）。

2. 部署到Vercel

1. 将代码推送到GitHub仓库。
2. 在Vercel上连接你的仓库并部署。
3. 按照Vercel的部署流程，设置你的项目。

3. 配置环境变量

在Vercel项目设置中，添加所有必要的环境变量，确保更新为生产环境的值，包括：

• BASE_URL：设置为你的生产域名。
• STRIPE_SECRET_KEY：使用生产环境的Stripe密钥。
• STRIPE_WEBHOOK_SECRET：使用你在Stripe Dashboard中创建的Webhook密钥。
• POSTGRES_URL：设置为生产环境的数据库URL。
• AUTH_SECRET：设置为一个随机字符串，可以使用openssl rand -base64 32生成。

同类项目推荐

虽然这个模板是一个简洁的学习资源，但社区中还有一些功能更为丰富的付费版本：

• Achromatic：提供更多高级功能和定制选项。
• ShipFast：专注于快速交付SaaS应用，提供更多自动化工具。
• MakerKit：适合需要更多定制化功能的开发者，提供丰富的插件和扩展。

通过这些项目，你可以进一步扩展和定制你的SaaS应用，满足不同的业务需求。

结语

Next.js SaaS Starter是一个功能强大且易于上手的模板，适合那些希望快速构建现代化SaaS应用的开发者。无论你是初学者还是经验丰富的开发者，这个项目都能为你提供一个坚实的基础，帮助你快速实现你的创意。