作为一名独立开发者构建 SaaS 是一项具有挑战性的任务。你需要扮演多重角色，并精通各种技术，需要对技术栈做出战略性决策。这意味着你需要成为一个熟悉前端和后端的全栈开发者。
选择正确的技术栈对于获得最佳的开发者体验至关重要。在这篇文章中，我将分享我用于构建 SaaS 的 Next.js 技术栈，并详细介绍该技术栈的不同部分。我还会分享我依赖的喜爱工具。以下是最终结果：
你可以查看 在线演示。
希望这篇文章能激励你，并在你自己的 SaaS 之旅中帮助到你。
Next.js，技术栈的支柱
作为一名独立开发者，你需要一个允许你轻松构建全栈应用的框架。Next.js 是构建 SaaS 的绝佳选择，因为它是一个 React 框架，可以让你高效地构建现代应用程序。
我使用 Next.js 来创建用户仪表板和营销站点。前端使用 React 编写，而后端使用 Next.js 路由处理程序。路由处理程序创建了一个 RESTful API，可以被 React 组件和其他客户端（如移动应用程序）使用。
在 营销站点和仪表板 上使用相同的框架使我能够在整个 SaaS 的所有部分重用组件和样式。这使得设计更加一致，开发更加高效。同样，前端和后端都依赖于 Next.js，使得在两者之间共享代码变得非常容易。
只用一种语言，TypeScript
为了最大化生产力，我只使用一种编程语言：TypeScript。结合 Next.js，TypeScript 让我可以在一个框架和一种语言中编写前端和后端代码，简化了开发过程，减少了上下文切换。
使用 Tailwind CSS 的 Shadcn UI
对于 UI，我选择了 Shadcn UI，这是一个构建在 Radix 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 可以无缝处理付款和订阅。使用 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 模式可以在前端和后端之间轻松共享，以确保双方数据的有效性。
测试
作为 SaaS 构建者，确保应用程序按预期工作至关重要。没有团队来测试我的应用程序，我必须依赖自动化测试。这样，我可以确保在添加新功能时，我的应用程序不会出现任何回归问题。
我使用 Vitest 和 React Testing Library 进行单元测试。Vitest 是一个测试运行器，支持 TypeScript 和 ESM，为 Jest 提供了现代的替代方案。Vitest 的另一个优势是它的官方 VSCode 扩展和 Vitest UI，使 Vitest 更加强大。而 React Testing Library 提供了与 React 组件交互的实用工具。
对于端到端（E2E）和集成测试，我依赖于 Playwright。Playwright 是一个强大的工具，允许你自动化浏览器交互，非常适合测试应用程序的全部功能。使用 Playwright，我可以模拟用户在不同浏览器上的交互，确保我的应用程序表现一致。此外，Playwright 对于测试 Next.js 路由处理程序非常好，因为它可以轻松发送 HTTP 请求并验证响应。
GitHub Actions
GitHub Actions 是我用于持续集成（CI）的强大工具。它允许我在将更改合并到主分支之前自动运行对代码的测试和检查过程。
每当我推送新提交或创建拉取请求时，GitHub Actions 自动触发我在存储库中定义的工作流。这些工作流使用 Vitest 运行单元测试，使用 Playwright 执行端到端测试，并执行代码检查和格式化检查。如果有任何问题，GitHub Actions 将通知我，防止我合并有问题的代码。因为我的代码正在不断地进行测试和验证，这为我提供了一个安全网，使我能够专注于构建新功能。特别是作为一个独立开发者，我们需要扮演多重角色，并且没有足够的时间手动测试应用程序的每个方面。
日志记录
我使用 Pino，这是一个用于 Node.js 的快速轻量级日志记录库。Pino提供了一个简单的API来记录消息，并支持结构化日志记录，使得搜索和分析日志变得更加容易。在生产环境中，我通过将日志发送到Better Stack来进一步完善日志记录。Better Stack提供了一个强大的日志记录平台，可以实现实时日志监控、警报和可视化。通过将Pino与Better Stack集成，我确保所有日志数据都能够高效地被捕获、存储和访问，从而能够快速识别和解决实时环境中的问题。
错误监控
对于错误监控，我使用 Sentry，它可以捕获错误和异常。Sentry提供了包括堆栈跟踪、用户上下文和其他相关信息在内的详细报告，使得更容易识别问题。
在本地开发中，我使用Spotlight来捕获Sentry事件，充分利用Sentry的遥测功能，而不会对生产实例造成压力。
环境变量
T3 Env是一个使用Zod来验证和转换环境变量的库。这确保了所有环境变量都被正确定义和验证。
代码检查器和代码格式化工具
保持一个干净的代码库是至关重要的。我使用ESLint和Prettier进行代码检查和格式化。ESLint通过强制执行最佳实践和捕获潜在错误来确保代码质量，而Prettier则强制执行一致的编码风格。这使得代码库更易读和易于维护。
我建议将Airbnb样式指南作为ESLint的基本配置，因为它是最受欢迎的JavaScript样式指南之一。此外，我使用eslint-plugin-playwright来确保我的Playwright测试遵循最佳实践，使用eslint-plugin-tailwind来强制执行Tailwind CSS的最佳实践。
VSCode
Visual Studio Code（VSCode）是我首选的代码编辑器，拥有丰富的扩展生态系统。以下是一些我推荐的扩展，它们与我的技术栈配合得很好：
vscode-eslint，将ESLint集成到VS Code中vscode-tailwindcss，为Tailwind CSS提供智能感知和语法高亮显示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产品。
作为一个独立开发者成功的关键是利用正确的工具和技术。这个技术栈是我根据自己的经验和需求做出的个人选择。根据您项目的需求，您可能会选择不同的工具。然而，原则始终不变：选择能提高您生产力的工具。
声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。