用 Next.js 14 全家桶快速搭建带订阅支付的 SaaS 启动模板

方案简介

next-saas-stripe-starter 是一个开源 SaaS 启动模板，将 Next.js 14、Prisma、Neon、Auth.js v5、Resend、React Email、Shadcn/ui 与 Stripe 无缝集成，帮助开发者以全速启动 SaaS 项目。它适合想快速搭建带用户认证、数据库、订阅支付和邮件能力的 Next.js 应用的独立开发者与团队，省去从零整合各服务的成本。

亮点与能力

• 基于 Next.js 14 构建高性能应用
• Auth.js 支持 Google、Twitter、GitHub 等多种登录方式
• Prisma 提供 TypeScript 优先的 ORM
• Neon 提供 Serverless Postgres，支持自动扩缩容与分支
• Stripe 订阅支付集成
• Shadcn/ui + Tailwind CSS + Framer Motion 构建可复用动效 UI
• Resend + React Email 邮件能力
• Vercel Analytics 隐私友好的访问统计
• ImageResponse 在边缘生成动态 Open Graph 图片

组成与分工

• Next.js：核心框架，React framework for building performant apps
• Auth.js：处理用户认证，支持多种 OAuth 提供商
• Prisma：TypeScript 优先的 Node.js ORM，操作数据库
• Neon：Serverless Postgres 数据库平台
• Stripe：订阅与支付
• Resend / React Email：邮件发送与邮件模板开发
• Shadcn/ui / Tailwind CSS / Framer Motion / Lucide：UI 组件、样式、动效与图标
• Vercel：部署预览平台
• TypeScript / ESLint / Prettier：类型检查与代码质量

前置要求

需要本地具备 pnpm 与 Node.js 环境，配置好各服务（Neon、Stripe、Resend、Auth 提供商）的环境变量。

克隆项目：
bash
npx create-next-app my-saas-project --example "https://github.com/mickasmt/next-saas-stripe-starter"

安装依赖：
sh
pnpm install

复制环境变量文件：
sh
cp .env.example .env.local

实施步骤

1. 克隆项目

使用 create-next-app 以模板方式创建本地项目：
bash
npx create-next-app my-saas-project --example "https://github.com/mickasmt/next-saas-stripe-starter"

2. 安装依赖

sh
pnpm install

3. 配置环境变量

复制 .env.example 到 .env.local 并更新其中的变量（数据库、认证、Stripe、Resend 等）。
sh
cp .env.example .env.local

4. 启动开发服务器

sh
pnpm run dev

也可以选择直接部署到 Vercel。

使用与配置要点

• 日常开发使用 pnpm run dev 启动本地服务器。
• 通过 Vercel 连接 git 仓库，可轻松预览与部署变更。
• 升级项目依赖可使用 npm-check-updates：ncu -i --format group。

注意事项与常见问题

• 项目 Roadmap 中有两项待完成：升级 eslint 到 v9；Add resend for success subscriptions（订阅成功邮件尚未加入）。
• 项目基于 MIT 协议发布，灵感来自 shadcn 的 Taxonomy、Steven Tey 的 Precedent 和 Antonio Erdeljac 的 Next 13 AI SaaS。

优缺点

• ✓ 一键克隆即可启动开发
• ✓ Seamlessly integrate
• ✕ Roadmap 中邮件订阅功能尚未完成
• ✕ 依赖较多服务配置 .env 较繁琐

出处

本方案挖掘自开源项目 mickasmt/next-saas-stripe-starter，方案内容与实施命令均来自其 README 原文。