Better SaaS:基于 Next.js 15 构建的现代化全栈 SaaS 应用(含身份验证、支付、文件管理、国际化)

图片[1]-Better SaaS:基于 Next.js 15 构建的现代化全栈 SaaS 应用(含身份验证、支付、文件管理、国际化)-🎉数字奇遇🎉

Better SaaS 是一个现代化的、功能全面的全栈 SaaS (Software as a Service) 应用程序,它基于 Next.js 15 构建,整合了身份验证、支付系统、文件管理、国际化(多语言支持)等核心功能,并配备了完善的测试套件,旨在为开发者提供一个快速启动 SaaS 项目的强大而可靠的基础平台。

**核心功能特性详解**

* **强大的身份验证系统:** Better SaaS 采用 Better Auth 构建了灵活且安全的身份验证系统,支持邮箱/密码注册登录,同时也集成了流行的社交登录方式,如 GitHub 和 Google 登录,方便用户快速注册和登录。

* **集成 Stripe 支付系统:** 该应用无缝集成了 Stripe 支付网关,支持订阅管理和计费仪表板。用户可以轻松创建和管理不同类型的订阅计划,并提供详细的计费信息,为 SaaS 业务提供可靠的支付保障。

* **灵活的文件管理功能:** Better SaaS 提供文件上传、预览和管理功能,支持将文件存储到 AWS S3 或 Cloudflare R2 对象存储服务,可以根据实际需求选择合适的存储方案,实现高效、安全的文件管理。

* **全面的国际化支持:** 该应用支持多语言,目前已支持英语和中文,使用了 next-intl 库来实现国际化,方便用户根据自己的语言偏好使用应用,有利于拓展国际市场。

* **响应式用户界面:** Better SaaS 采用了现代化的 UI 设计,使用了 Radix UI 组件库和 Tailwind CSS v4 框架,确保在各种设备上都能提供一致且良好的用户体验。

* **内置文档系统:** 项目内置了文档系统,基于 Fumadocs 构建,方便开发者查阅项目架构设计、安装配置指南、API 接口文档、UI 组件库使用说明、测试策略、部署指南等信息。

* **安全的路由保护机制:** Better SaaS 实现了基于角色的访问控制和路由保护,确保用户只能访问其权限范围内的页面和功能,增强了应用的安全性。

* **用户管理后台:** 提供用户管理和系统管理后台,方便管理员管理用户账户、角色权限、系统配置等,简化了管理工作。

* **卓越的性能优化:** Better SaaS 利用 Next.js 15 App Router 和 Turbo 模式进行优化,从而提供快速的页面加载速度和流畅的用户体验。

* **完善的测试套件:** 包含单元测试、集成测试和端到端测试,使用了 Jest、React Testing Library 和 Playwright 等测试框架,保证代码质量和应用稳定性。

**技术栈分析**

Better SaaS 采用了一系列先进的技术栈,保证了应用的性能、可维护性和可扩展性:

* **前端**
* **框架:** Next.js 15 (App Router)
* **UI 组件:** Radix UI + Tailwind CSS v4
* **状态管理:** Zustand
* **数据获取:** SWR
* **样式:** Tailwind CSS v4
* **图标:** Lucide React
* **后端**
* **运行时:** Node.js
* **数据库:** PostgreSQL
* **ORM:** Drizzle ORM
* **身份验证:** Better Auth
* **支付:** Stripe
* **文件存储:** AWS S3/Cloudflare R2
* **验证:** Zod
* **开发与测试**
* **语言:** TypeScript
* **包管理器:** pnpm
* **代码质量:** Biome(格式化、代码检查)
* **环境:** @t3-oss/env-nextjs
* **单元测试:** Jest 配合 React Testing Library
* **集成测试:** Jest 配合数据库集成
* **端到端测试:** Playwright
* **测试覆盖率:** 全面的覆盖率报告

**文档**

完整的项目文档已迁移至在线文档站点:[https://www.better-saas.org/zh/docs](https://www.better-saas.org/zh/docs)。在线文档包含架构设计与系统概述、详细安装与配置指南、API 接口文档与示例、UI 组件库使用说明、测试策略与最佳实践、部署指南与生产环境配置、国际化实现方案、支付集成与订阅管理等内容。建议收藏该链接,以便获取最新信息。

**快速开始指南**

以下是快速启动 Better SaaS 项目的步骤:

1. **前置要求:**
* Node.js 18+
* pnpm
* PostgreSQL 数据库
* Stripe 账户 (用于支付)
* AWS S3 或 Cloudflare R2 (用于文件存储)
2. **安装:**
* 克隆仓库: `git clone <repository-url>`
* 进入项目目录: `cd better-saas`
* 安装依赖: `pnpm install`
3. **设置环境变量:**
* 复制环境变量文件: `cp env.example .env`
* 填写必要的环境变量,包括:
* `DATABASE_URL`: PostgreSQL 连接字符串
* `BETTER_AUTH_SECRET`: 身份验证的随机密钥
* `GITHUB_CLIENT_ID` & `GITHUB_CLIENT_SECRET`: GitHub OAuth 应用凭证
* `GOOGLE_CLIENT_ID` & `GOOGLE_CLIENT_SECRET`: Google OAuth 应用凭证
* `STRIPE_SECRET_KEY` & `STRIPE_WEBHOOK_SECRET`: Stripe API 密钥
* `NEXT_PUBLIC_STRIPE_PRICE_PRO_MONTHLY` & `NEXT_PUBLIC_STRIPE_PRICE_PRO_YEARLY`: Stripe 价格 ID
* `R2_*`: Cloudflare R2 或 AWS S3 配置
* `NEXT_PUBLIC_APP_URL`: 应用的 URL
* `ADMIN_EMAILS`: 管理员邮箱地址,用逗号分隔
4. **设置数据库:**
* `pnpm db:push`
5. **启动开发服务器:**
* `pnpm dev`
6. **在浏览器中打开** `http://localhost:3000`。

**语言支持**

应用支持多种语言:

* 英语(默认)
* 中文(简体)

语言文件位于 `src/i18n/messages/` 目录。

**贡献指南**

欢迎为 Better SaaS 项目做出贡献:

1. Fork 仓库
2. 创建功能分支
3. 进行更改
4. 为新功能编写测试
5. 运行测试和质量检查:
* `pnpm test:all`
* `pnpm check`
* `pnpm typecheck`
6. 确保所有测试通过且满足覆盖率要求
7. 提交 Pull Request

**许可证**

本项目基于 MIT 许可证。

**社区与支持**

扫码添加作者微信,邀请你进入专属答疑微信群,获取配套的视频教程和实战项目代码。

**总结**

Better SaaS 是一个功能强大、技术先进的 SaaS 应用模板,它集成了身份验证、支付、文件管理、国际化等核心功能,并提供了完善的文档和测试,可以帮助开发者快速构建高质量的 SaaS 应用。无论您是想快速启动一个新的 SaaS 项目,还是想学习 Next.js 15 和相关技术栈,Better SaaS 都是一个值得学习和使用的优秀项目。

www.better-saas.org

justnode/better-saas: Full-stack SaaS application built with Next.js
https://github.com/justnode/better-saas?tab=readme-ov-file

 

© 版权声明
THE END
喜欢就支持一下吧
点赞987 分享
评论 抢沙发

请登录后发表评论

    暂无评论内容