面向独立 SaaS 开发人员的终极 2024 年技术堆栈：构建更智能，而不是更费力

作为一名独立开发人员构建 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 构建的组件集合，它提供了无样式的 React 组件。 Shadcn UI 样式 Radix UI 使用 Tailwind CSS 为 SaaS 提供漂亮的 UI。好消息是，我可以在营销网站和用户仪表板之间无缝共享这些组件。

订阅我的 JS 开发者通讯

获取有关使用 Next JS 和 Tailwind CSS 进行全栈 React 开发的有用内容。无垃圾邮件，可随时取消订阅。

验证

身份验证是任何 SaaS 的关键部分。我使用办事员用于身份验证，提供电子邮件/密码和社交登录等全面功能。许多开源库都提供这些基本功能。

但是，如果你的应用程序需要更多 高级功能，Clerk 是一个很好的选择。它可以处理多因素身份验证、用户模拟、多会话支持（一个用户可以连接到多个帐户）、阻止一次性电子邮件、暴力破解保护、机器人保护等。

办事员还提供了完整的 React UI 用于身份验证，可以根据您的品牌进行定制。它节省了您从头开始开发身份验证的时间和精力。其中一些 内置用户界面 Clerk 提供的服务包括注册、登录、忘记密码、重置密码和用户资料。

多租户和团队管理

强大的 SaaS 应该支持团队或组织内的协作。办事员提供全面的多租户和团队管理系统，包括完整的 用于管理团队和邀请用户的用户界面。这意味着我不需要为团队管理实现后端逻辑或 UI，因为 Clerk 会处理所有事情，包括发送邀请电子邮件并允许用户在团队之间无缝切换。

角色和权限

对于多租户来说，管理角色和权限非常重要。办事员允许创建自定义角色和权限，使用户能够分配角色。例如，管理员拥有团队内的所有权限，而只读角色只能查看资源。这确保了适当的访问和安全性。

数据库

我使用 Drizzle ORM 进行数据库管理，因为它是类型安全的，并且可以与 TypeScript 无缝集成。借助 Drizzle，我可以直接在 TypeScript 中定义模型和关系，无需外部架构文件。这意味着您不必学习其他语法。

Drizzle 还提供 毛毛雨套件，一个简化迁移过程的 CLI 工具。使用 Drizzle Kit，您可以生成迁移文件夹以无缝更新数据库架构。

此外，您还有 细雨工作室 获得一个可视化界面来管理您的数据库。Drizzle Studio 允许您查看数据库架构、运行查询和浏览数据。

条纹

Stripe 无缝处理付款和订阅。借助 Stripe SDK，我可以轻松地将付款处理集成到我的 Next.js 应用程序中。 Stripe 提供结帐页面，用户可以重定向到该页面。此页面不仅提醒用户他们即将订阅的计划，还会提醒用户每月或每年的价格。最后，用户可以输入他们的信用卡详细信息并订阅所选计划。

订阅完成后，Stripe 将向我的 REST API 端点发送一个 webhook 事件，表明用户已订阅。这样我就可以在数据库中更新用户的订阅状态。

Stripe 提供 自助服务门户 供您的用户管理其订阅。在此门户中，用户可以更改其计划、更新其付款方式、取消其订阅并查看其发票。

国际化（i18n）

为了覆盖全球受众，我使用 Next-Intl 库来支持 Next.js 中的多种语言。Next-Intl 可确保类型安全的翻译，并验证使用的翻译键是否正确。这可防止因翻译缺失或不正确而导致的运行时错误。

为了使翻译体验更加高效，我使用克罗丁， A 本地化平台 与 GitHub 无缝集成。Crowdin 允许我协作管理翻译，确保应用程序支持所需的语言。

表单管理

我用 React-Hook-Form 与 Zod 结合 用于表单管理和验证。React-Hook-Form 简化了 React 中的表单处理，而 Zod 则确保了数据验证。Zod 模式可在前端和后端之间轻松共享，以确保双方的数据有效性。

测试

作为 SaaS 构建者，确保应用程序按预期运行至关重要。如果没有团队来测试我的应用程序，我必须依赖自动化测试。这样，我就可以确信我的应用程序在添加新功能时不会出现任何退化。

我用 Vitest 和 React 测试库用于单元测试。Vitest 是一个开箱即用地支持 TypeScript 和 ESM 的测试运行器，为 Jest 提供了现代替代方案。Vitest 的另一个优势是其官方 VSCode 扩展和 Vitest UI，这让 Vitest 更加出色。此外，React Testing Library 提供了与 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 提供强大的日志记录平台，可实现实时日志监控、警报和可视化。通过将 Pino 与 Better Stack 集成，我确保所有日志数据都能被高效捕获、存储和访问，从而能够在实时环境中快速识别和解决问题。

错误监控

对于错误监控，我使用哨兵，用于捕获错误和异常。它提供包含堆栈跟踪、用户上下文和其他相关信息的详细报告，从而更轻松地识别问题。

在本地开发中，我使用 聚光灯捕捉哨兵事件，利用 Sentry 的遥测功能，而不会压垮生产实例。

环境变量

T3 环境 是一个使用 Zod 来验证和转换环境变量的库。这确保所有环境变量都得到正确定义和验证。

Linter 和代码格式化程序

维护干净的代码库至关重要。我使用 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 提供 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 产品的全面起点。