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] 與我們聯繫！
