SaaS Boilerplate
v1.7.3
SaaS Boilerplate是一个功能强大且完全可定制的模板，用于启动您的 SaaS 应用程序。使用Next.js和Tailwind CSS以及Shadcn UI的模块化 UI 组件构建。此Next.js SaaS 模板可帮助您以最少的努力快速构建和启动 SaaS。
包含内置身份验证、具有团队支持的多租户、角色和权限、数据库、I18n（国际化）、登陆页面、用户仪表板、表单处理、SEO 优化、日志记录、Sentry 错误报告、测试、部署等基本功能、监控和用户模拟，此 SaaS 模板提供了您入门所需的一切。
此Next.js 入门套件在设计时充分考虑了开发人员的需求，使用 TypeScript 实现类型安全，并集成 ESLint 来维护代码质量，并集成 Prettier 来实现一致的代码格式。该测试套件结合了 Vitest 和 React 测试库来进行强大的单元测试，而 Playwright 则负责集成和 E2E 测试。持续集成和部署通过 GitHub Actions 进行管理。对于用户管理，身份验证由 Clerk 处理。对于数据库操作，它使用 Drizzle ORM 在 PostgreSQL、SQLite 和 MySQL 等流行数据库中进行类型安全的数据库管理。
无论您是构建新的 SaaS 应用程序还是正在寻找灵活的、可用于生产的 SaaS 模板，此样板都能满足您的需求。这个免费的开源入门套件包含加速开发和轻松扩展产品所需的一切。
克隆该项目并使用它来创建您自己的 SaaS。您可以在 SaaS Boilerplate 上查看实时演示，这是一个具有工作身份验证和多租户系统的演示。
 |  |   |
 | ||
| 在此添加您的徽标 |
现场演示：SaaS 样板
| 登陆页面 | 用户仪表板 |
|---|---|
 |  |
| 团队管理 | 用户资料 |
|---|---|
 |  |
| 报名 | 登入 |
|---|---|
 |  |
| 深色模式登陆页面（专业版） | 具有深色模式的用户仪表板（专业版） |
|---|---|
 |  |
| 带侧边栏的用户仪表板（专业版） |
|---|
 |
开发者体验优先，极其灵活的代码结构，只保留您需要的：
@前缀的绝对导入Next.js 的内置功能：
在本地环境中运行以下命令：
git clone --depth=1 https://github.com/ixartz/SaaS-Boilerplate.git my-project-name
cd my-project-name
npm install供您参考，所有依赖项每月都会更新。
然后，您可以通过执行以下命令以实时重新加载的方式在开发模式下本地运行项目：
npm run dev使用您喜欢的浏览器打开 http://localhost:3000 以查看您的项目。
在 Clerk.com 创建一个 Clerk 帐户，并在 Clerk Dashboard 中创建一个新应用程序。然后，将NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY和CLERK_SECRET_KEY的值复制到.env.local文件（Git 不跟踪该文件）：
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=your_clerk_pub_key
CLERK_SECRET_KEY=your_clerk_secret_key在您的文员仪表板中，您还需要通过导航到Organization management > Settings > Enable organization来Enable Organization 。
现在，您已经有了一个使用 Next.js 的完整工作身份验证系统：注册、登录、注销、忘记密码、重置密码、更新个人资料、更新密码、更新电子邮件、删除帐户等等。
该项目使用 DrizzleORM，这是一种类型安全的 ORM，与 PostgreSQL、SQLite 和 MySQL 数据库兼容。默认情况下，该项目设置为与 PostgreSQL 无缝协作，您可以轻松选择任何 PostgreSQL 数据库提供商。
对于翻译，该项目使用next-intl与 Crowdin 相结合。作为开发人员，您只需要关注英语（或其他默认语言）版本。其他语言的翻译由 Crowdin 自动生成和处理。您可以使用 Crowdin 与您的翻译团队协作，或借助机器翻译自行翻译消息。
要设置翻译 (i18n)，请在 Crowdin.com 上创建一个帐户并创建一个新项目。在新创建的项目中，您将能够找到项目 ID。您还需要通过转到帐户设置 > API 创建新的个人访问令牌。然后，在 GitHub Actions 中，您需要定义以下环境变量： CROWDIN_PROJECT_ID和CROWDIN_PERSONAL_TOKEN 。
在 GitHub Actions 中定义环境变量后，每次将新提交推送到main分支时，您的本地化文件都将与 Crowdin 同步。
.
├── README.md # README file
├── .github # GitHub folder
├── .husky # Husky configuration
├── .storybook # Storybook folder
├── .vscode # VSCode configuration
├── migrations # Database migrations
├── public # Public assets folder
├── scripts # Scripts folder
├── src
│ ├── app # Next JS App (App Router)
│ ├── components # Reusable components
│ ├── features # Components specific to a feature
│ ├── libs # 3rd party libraries configuration
│ ├── locales # Locales folder (i18n messages)
│ ├── models # Database models
│ ├── styles # Styles folder
│ ├── templates # Templates folder
│ ├── types # Type definitions
│ └── utils # Utilities folder
├── tests
│ ├── e2e # E2E tests, also includes Monitoring as Code
│ └── integration # Integration tests
├── tailwind.config.js # Tailwind CSS configuration
└── tsconfig.json # TypeScript configuration您可以通过在整个项目中搜索FIXME:来轻松配置 Next.js SaaS Boilerplate，以进行快速定制。以下是一些需要自定义的最重要的文件：
public/apple-touch-icon.png 、 public/favicon.ico 、 public/favicon-16x16.png和public/favicon-32x32.png ：您的网站 faviconsrc/utils/AppConfig.ts ：配置文件src/templates/BaseTemplate.tsx ：默认主题next.config.mjs : Next.js 配置.env ：默认环境变量您可以完全访问源代码以进行进一步的定制。提供的代码只是帮助您启动项目的示例。天空是极限。
在源代码中，您还会发现PRO注释，指示仅在 PRO 版本中可用的代码。您可以轻松删除此代码或用您自己的实现替换此代码。
要修改项目中的数据库架构，您可以更新位于./src/models/Schema.ts架构文件。该文件使用 Drizzle ORM 库定义数据库表的结构。
对架构进行更改后，通过运行以下命令生成迁移：
npm run db:generate这将创建一个反映您的架构更改的迁移文件。迁移会在下次数据库交互期间自动应用，因此无需手动运行它或重新启动 Next.js 服务器。
该项目遵循常规提交规范，这意味着所有提交消息都必须采用相应的格式。为了帮助您编写提交消息，该项目使用 Commitizen，这是一个交互式 CLI，可指导您完成提交过程。要使用它，请运行以下命令：
npm run commit使用常规提交的好处之一是能够自动生成CHANGELOG文件。它还允许我们根据版本中包含的提交类型自动确定下一个版本号。
该项目与 Stripe 集成用于订阅支付。您需要创建一个 Stripe 帐户，还需要安装 Stripe CLI。安装Stripe CLI后，您需要使用CLI登录：
stripe login然后，您可以运行以下命令来创建新价格：
npm run stripe:setup-price运行命令后，您需要复制价格 ID 并将其粘贴到src/utils/AppConfig.ts中，方法是将现有价格 ID 更新为新价格 ID。
在 Stripe 仪表板中，您需要在 https://dashboard.stripe.com/test/settings/billing/portal 配置客户门户设置。最重要的是，您需要保存设置。
在.env文件中，您需要使用您自己的 Stripe Publishable 密钥更新NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY 。您可以在 Stripe 仪表板中找到密钥。然后，您还需要创建一个名为.env.local的新文件，并在新创建的文件中添加以下环境变量：
STRIPE_SECRET_KEY=your_stripe_secret_key
STRIPE_WEBHOOK_SECRET=your_stripe_webhook_secret您可以从 Stripe 仪表板获取STRIPE_SECRET_KEY 。 STRIPE_WEBHOOK_SECRET是通过运行以下命令生成的：
npm run dev您将在终端中找到 Webhook 签名密钥。您可以将其复制并粘贴到.env.local文件中。
所有单元测试都与源代码一起位于同一目录中，使它们更容易找到。该项目使用Vitest和React测试库进行单元测试。您可以使用以下命令运行测试：
npm run test该项目使用 Playwright 进行集成和端到端 (E2E) 测试。您可以使用以下命令运行测试：
npx playwright install # Only for the first time in a new environment
npm run test:e2e在本地环境中，可视化测试被禁用，终端会显示消息[percy] Percy is not running, disabling snapshots. 。默认情况下，可视化测试仅在 GitHub Actions 中运行。
App Router 文件夹与 Edge 运行时兼容。您可以通过添加以下行src/app/layouts.tsx来启用它：
export const runtime = 'edge' ;供您参考，数据库迁移与 Edge 运行时不兼容。因此，您需要在src/libs/DB.ts中禁用自动迁移：
await migrate ( db , { migrationsFolder : './migrations' } ) ;禁用它后，您需要使用以下命令手动运行迁移：
npm run db:migrate您还需要在每次想要更新数据库架构时运行该命令。
在构建过程中，数据库迁移会自动执行，因此无需手动运行它们。但是，您必须在环境变量中定义DATABASE_URL 。
然后，您可以使用以下命令生成生产版本：
$ npm run build它生成样板的优化生产构建。要测试生成的构建，请运行：
$ npm run start您还需要使用自己的密钥定义环境变量CLERK_SECRET_KEY 。
此命令使用生产版本启动本地服务器。现在，您可以在首选浏览器中打开 http://localhost:3000 以查看结果。
该项目使用Sentry来监控错误。在开发环境中，不需要额外的设置：NextJS SaaS Boilerplate 已预先配置为使用 Sentry 和 Spotlight（Sentry for Development）。所有错误都会自动发送到您本地的 Spotlight 实例，让您在本地体验 Sentry。
对于生产环境，您需要创建一个 Sentry 帐户和一个新项目。然后，在next.config.mjs中，您需要更新withSentryConfig函数中的org和project属性。此外，将您的 Sentry DSN 添加到sentry.client.config.ts 、 sentry.edge.config.ts和sentry.server.config.ts 。
Next.js SaaS Template 依赖于 Codecov 来提供代码覆盖率报告解决方案。要启用 Codecov，请创建一个 Codecov 帐户并将其连接到您的 GitHub 帐户。您的存储库应显示在 Codecov 仪表板上。选择所需的存储库并复制令牌。在 GitHub Actions 中，定义CODECOV_TOKEN环境变量并粘贴令牌。
确保将CODECOV_TOKEN创建为 GitHub Actions 密钥，不要将其直接粘贴到源代码中。
该项目使用 Pino.js 进行日志记录。开发环境下，日志默认显示在控制台。
对于生产，该项目已经与 Better Stack 集成，以使用 SQL 管理和查询日志。要使用 Better Stack，您需要创建 Better Stack 帐户并创建新源：转到 Better Stack 日志仪表板 > 源 > 连接源。然后，您需要为源命名并选择 Node.js 作为平台。
创建源后，您将能够查看和复制源令牌。在环境变量中，将令牌粘贴到LOGTAIL_SOURCE_TOKEN变量中。现在，所有日志都将自动发送到 Better Stack 并由 Better Stack 摄取。
该项目使用 Checkly 来确保您的生产环境始终正常运行。 Checkly 会定期运行以*.check.e2e.ts扩展名结尾的测试，并在任何测试失败时通知您。此外，您还可以灵活地从多个位置执行测试，以确保您的应用程序在全球范围内可用。
要使用 Checkly，您必须首先在其网站上创建一个帐户。创建帐户后，在 Checkly Dashboard 中生成新的 API 密钥，并在 GitHub Actions 中设置CHECKLY_API_KEY环境变量。此外，您还需要定义CHECKLY_ACCOUNT_ID ，也可以在 Checkly 仪表板的“用户设置”>“常规”下找到该 ID。
要完成设置，请使用您自己的电子邮件地址和生产 URL 更新checkly.config.ts文件。
Next.js SaaS 入门套件包含一个内置的捆绑分析器。它可用于分析 JavaScript 包的大小。首先，运行以下命令：
npm run build-stats通过运行该命令，它将自动打开一个包含结果的新浏览器窗口。
该项目已经配置了 Drizzle Studio 来探索数据库。您可以运行以下命令打开数据库工作室：
npm run db:studio然后，您可以使用您喜欢的浏览器打开 https://local.drizzle.studio 来探索您的数据库。
如果您是 VSCode 用户，可以通过在.vscode/extension.json中安装建议的扩展来更好地与 VSCode 集成。起始代码提供了与 VSCode 无缝集成的设置。还提供调试配置以实现前端和后端调试体验。
通过在 VSCode 中安装插件，ESLint 和 Prettier 可以自动修复代码并显示错误。这同样适用于测试：您可以安装 VSCode Vitest 扩展来自动运行测试，它还会显示上下文中的代码覆盖率。
专业提示：如果您需要使用 TypeScript 进行项目宽类型检查，您可以在 Mac 上使用Cmd + Shift + B运行构建。
欢迎大家为这个项目做出贡献。如果您有任何疑问或发现错误，请随时提出问题。完全接受建议和改进。
根据 MIT 许可证获得许可，版权所有 © 2024
请参阅许可证了解更多信息。
| | |
| ||
| 在此添加您的徽标 |
由 CreativeDesignsGuru 用 ♥ 制作
正在寻找定制样板来启动您的项目？我很乐意讨论如何帮助您构建一个。请随时通过 [email protected] 与我们联系！
