作为独立开发人员构建 SaaS 是一项具有挑战性的任务。您必须身兼数职并精通各种技术，这需要对您的技术堆栈做出战略决策。这意味着您需要成为熟悉前端和后端的全栈开发人员。
选择正确的技术堆栈对于获得最佳的开发人员体验至关重要。在这篇文章中，我将分享我用于构建 SaaS Next.js堆栈，并分解堆栈的不同部分。我还将分享我最喜欢的工具。以下是最终结果：
我的 SaaS 的用户仪表板
您可以查看现场演示。
希望这篇文章能激励您并帮助您踏上自己的 SaaS 之旅。
Next.js、电堆的骨干
作为独立开发人员，您需要一个框架，让您能够轻松构建全栈应用程序。Next.js 是构建 SaaS 的绝佳选择，因为它是一个 React 框架，使您能够有效地构建现代应用程序。
我使用 Next.js 来创建用户仪表板和营销网站。前端是用 React 编写的，而后端使用 Next.js 路由处理程序。路由处理程序创建一个 RESTful API，React 组件和其他客户端（例如移动应用程序）可以使用该 API。
对营销网站和仪表板使用相同的框架使我能够在 SaaS 的所有部分中重用组件和样式。这使得设计更加一致，开发更加高效。同样，让前端和后端都依赖于 Next.js 使得在两者之间共享代码变得非常容易。
只有一种语言，TypeScript
为了最大限度地提高工作效率，我只使用一种编程语言：TypeScript。结合 Next.js，TypeScript 让我可以在一个框架和一种语言中编写前端和后端代码，简化了开发过程并减少了上下文切换。
带有 Tailwind CSS 的 Shadcn UI
对于 UI，我选择了 Shadcn UI，它是构建在 Radix UI 之上的组件集合，它提供了无样式的 React 组件。Shadcn UI 使用 Tailwind CSS 为 Radix UI 组件设置样式，为 SaaS 提供美观的 UI。好消息是，我可以在营销网站和用户仪表板之间无缝共享这些组件。
认证
身份验证是任何 SaaS 的关键部分。我使用 Clerk 进行身份验证，它提供了全面的功能，例如电子邮件/密码和社交登录。这些基本功能在许多开源库中都可用。
但是，如果您的应用程序需要更高级的功能，Clerk 是一个很好的选择。它可以处理多因素身份验证、用户冒充、多会话支持（一个用户可以连接到多个帐户）、阻止一次性电子邮件、暴力破解保护、机器人保护等。
Clerk 还在 React 中提供了一个完整的 UI 用于身份验证，可以自定义以匹配您的品牌。它为您节省了从头开始开发身份验证的时间和精力。Clerk 提供的一些内置 UI 包括注册、登录、忘记密码、重置密码和用户配置文件。
多租户和团队管理
强大的 SaaS 应该支持团队或组织内部的协作。Clerk 提供了一个全面的多租户和团队管理系统，包括用于管理团队和邀请用户的完整 UI。这意味着我不需要为团队管理实现后端逻辑或 UI，因为 Clerk 会处理所有事情，包括发送邀请电子邮件和允许用户在团队之间无缝切换。
角色和权限
在多租户中，管理角色和权限非常重要。Clerk 允许创建自定义角色和权限，使用户能够分配角色。例如，管理员拥有团队中的所有权限，而只读角色只能查看资源。这确保了适当的访问和安全性。
数据库
我使用 Drizzle ORM 进行数据库管理，因为它是类型安全的，并且与 TypeScript 无缝集成。使用 Drizzle，我可以直接在 TypeScript 中定义模型和关系，无需外部模式文件。这意味着您不必学习其他语法。
Drizzle 还提供 Drizzle Kit，这是一个简化迁移过程的 CLI 工具。使用 Drizzle Kit，您可以生成迁移文件夹以无缝更新您的数据库架构。
此外，您还有 Drizzle Studio，用于管理数据库的可视化界面。Drizzle Studio 允许您查看数据库架构、运行查询和浏览数据。
条纹
Stripe 无缝处理付款和订阅。借助 Stripe SDK，我可以轻松地将支付处理集成到我的Next.js应用程序中。Stripe 提供了一个结账页面，用户可以重定向到该页面。此页面不仅提醒用户他们即将订阅的计划，还提醒每月或每年的价格。最后，用户可以输入他们的信用卡详细信息并订阅所选计划。
订阅后，Stripe 将向我的 REST API 端点发送一个 webhook 事件，表明用户已订阅。这使我能够在数据库中更新用户的订阅状态。
Stripe 为您的用户提供了一个自助服务门户来管理他们的订阅。在此门户中，用户可以更改其计划、更新其付款方式、取消其订阅以及查看其发票。
国际化 （i18n）
为了吸引全球受众，我使用 Next-Intl 库来支持 Next.js 中的多种语言。Next-Intl 确保类型安全的翻译，验证是否正在使用正确的翻译键。这样可以防止由丢失或不正确的翻译导致的运行时错误。
为了提高翻译体验的效率，我使用了 Crowdin，这是一个与 GitHub 无缝集成的本地化平台。Crowdin 使我能够协作管理翻译，确保应用程序以所需的语言提供。
表单管理
我使用 React-Hook-Form 与 Zod 结合使用来进行表单管理和验证。React-Hook-Form 简化了 React 中的表单处理，而 Zod 确保了数据验证。Zod schema 可以很容易地在前端和后端之间共享，以保证双方的数据有效性。
测试
作为 SaaS 构建者，确保应用程序按预期运行至关重要。如果没有团队来测试我的应用程序，我必须依赖自动化测试。这样，我确信在添加新功能时，我的应用程序不会遇到任何回归。
我使用 Vitest 和 React 测试库进行单元测试。Vitest 是一个开箱即用的 TypeScript 和 ESM 测试运行器，提供了 Jest 的现代替代品。Vitest 的另一个优势是其官方的 VSCode 扩展和 Vitest UI，这使得 Vitest 变得更好。而且，React 测试库提供了用于与 React 组件交互的实用程序。
对于端到端 （E2E） 和集成测试，我依赖 Playwright。Playwright 是一个强大的工具，可让您自动执行浏览器交互，使其成为测试应用程序全部功能的理想选择。借助 Playwright，我可以模拟不同浏览器之间的用户交互，从而确保我的应用程序始终如一地运行。此外，Playwright 非常适合测试Next.js路由处理程序，因为它可以轻松发送 HTTP 请求并验证响应。
GitHub 操作
GitHub Actions 是我用于持续集成 （CI） 的强大工具。它允许我在将更改合并到主分支之前自动执行对代码运行测试和检查的过程。
每当我推送新的提交或创建拉取请求时，GitHub Actions 都会自动触发我在仓库中定义的工作流。这些工作流使用 Vitest 运行单元测试，使用 Playwright 执行端到端测试，并执行 linting 和代码格式检查。如果有任何问题，GitHub Actions 会通知我，防止我合并有问题的代码。
因为我的代码不断被测试和验证，所以它提供了一个安全网，使我能够专注于构建新功能。特别是作为一个独立的开发人员，我们需要身兼数职，并且有有限的时间来手动测试应用程序的各个方面。
伐木
我使用 Pino，这是一个快速轻量级的 Node.js 日志记录库。Pino 提供了一个简单的 API 来记录消息，并支持结构化日志，使搜索和分析日志变得容易。在生产中，我通过将日志发送到 Better Stack 来进一步进行日志记录。Better Stack 提供了一个强大的日志平台，允许实时日志监控、警报和可视化。通过将 Pino 与 Better Stack 集成，我确保所有日志数据都被有效地捕获、存储和访问，从而能够在实时环境中快速识别和解决问题。
错误监控
对于错误监控，我使用 Sentry，它可以捕获错误和异常。它提供详细的报告，包括堆栈跟踪、用户上下文和其他相关信息，从而更容易识别问题。
在本地开发中，我使用 Spotlight 来捕获 Sentry 事件，利用 Sentry 的遥测技术，而不会使生产实例不堪重负。
环境变量
T3 Env 是一个使用 Zod 来验证和转换环境变量的库。这样可以确保所有环境变量都得到正确定义和验证。
Linter 和代码格式化程序
维护干净的代码库至关重要。我使用 ESLint 和 Prettier 进行 linting 和代码格式化。ESLint 通过执行最佳实践和捕获潜在错误来确保代码质量，而 Prettier 则执行一致的编码风格。这使得代码库更具可读性和可维护性。
我建议使用 Airbnb 风格指南作为 ESLint 的基本配置，因为它是最受欢迎的 JavaScript 风格指南之一。此外，我还用于确保我的 Playwright 测试遵循最佳实践，并强制执行 Tailwind CSS 的最佳实践。eslint-plugin-playwright``eslint-plugin-tailwind
VSCode
Visual Studio Code （VSCode） 是我的首选代码编辑器，它具有丰富的扩展生态系统。以下是我推荐的一些扩展，这些扩展可以很好地与我的技术堆栈配合使用：
vscode-eslint，将 ESLint 集成到 VS Code 中vscode-tailwindcss，为 Tailwind CSS 提供 IntelliSense 和语法高亮显示vscode-github-actions，直接在 VSCode 中管理 GitHub Actions 工作流i18n-ally，支持国际化，提供翻译键管理，让多国语言工作更轻松
结论
总之，作为独立开发人员构建 SaaS 可能非常具有挑战性。但是，选择正确的技术堆栈可以使该过程变得更加容易，使您能够专注于为用户提供价值。本文中分享的 Next.js、TypeScript、Shadcn UI 与 Tailwind CSS、Clerk、Drizzle ORM、Stripe 和其他工具的结合为构建 SaaS 产品提供了一个可扩展的环境。
这些工具不仅可以简化开发过程，还可以确保您的应用程序安全、高性能且用户友好。它们处理从身份验证、多租户和支付处理到数据库管理、测试和持续集成的所有内容，帮助您专注于业务逻辑和用户体验。
如果您想查看最终结果，您可以找到现场演示。
我创建了一个Next.js SaaS 样板，这是使用本文中共享的相同技术堆栈构建自己的 SaaS 产品的全面起点。
作为独立开发人员，成功的关键是利用正确的工具和技术。这个技术堆栈是我根据我的经验和要求做出的个人选择。根据项目的需求，您可以选择不同的工具。然而，原则仍然是一样的：选择能提高工作效率的工具。
我希望这篇文章能为你自己的SaaS之旅提供一些见解和灵感。祝您编码愉快！
