這是一個入門模板，用於使用Next.js建立 SaaS 應用程序，支援身份驗證、支付 Stripe 整合以及登入用戶的儀表板。
示範：https://next-saas-start.vercel.app/
2020 年，我製作了一門名為「React 2025」的課程，展示如何使用 Next.js、Stripe 和其他工具建立 SaaS 應用程式。
好吧，快到 2025 年了，React 19 帶來了很多我沒有預料到的令人驚嘆的新功能！此儲存庫示範了最新的 React 和 Next.js 模式。這些模式可以大幅簡化建構 SaaS 時的一些常見任務，例如建立表單、與資料庫互動等。
例如，React 現在內建了像useActionState這樣的鉤子來處理內聯表單錯誤和掛起狀態。 React Server Actions 可以取代從客戶端呼叫 API 路由所需的大量樣板程式碼。最後，React use hook 與 Next.js 結合使得建立強大的useUser() hook 變得異常容易。
我們能夠從根佈局中的 Postgres 資料庫中取得用戶，但不能等待Promise 。相反，我們將Promise轉發給 React 上下文提供者，在那裡我們可以「解開」它並等待資料流。這意味著我們可以兩全其美：從資料庫取得資料的簡單程式碼（例如getUser() ）和我們可以在客戶端元件中使用的 React hook（例如useUser() ）。
有趣的事實：此應用程式的大部分 UI 都是使用 v0 建立的？如果您想了解此儲存庫，請點擊此處了解更多詳細資訊。
/ )/pricing )git clone https://github.com/leerob/next-saas-starter
cd next-saas-starter
pnpm install使用附帶的安裝腳本建立.env檔：
pnpm db:setup然後，運行資料庫遷移並使用預設使用者和團隊為資料庫播種：
pnpm db:migrate
pnpm db:seed這將創建以下用戶和團隊：
[email protected]admin123當然，您也可以透過/sign-up建立新使用者。
最後，運行 Next.js 開發伺服器：
pnpm dev在瀏覽器中開啟 http://localhost:3000 以查看應用程式的運作情況。
或者，您可以透過 CLI 在本地偵聽 Stripe webhooks 以處理訂閱變更事件：
stripe listen --forward-to localhost:3000/api/stripe/webhook要測試 Stripe 付款，請使用以下測試卡詳細資訊：
4242 4242 4242 4242當您準備好將 SaaS 應用程式部署到生產環境時，請按照以下步驟操作：
https://yourdomain.com/api/stripe/webhook ）。checkout.session.completed 、 customer.subscription.updated ）。在 Vercel 專案設定中（或在部署期間），新增所有必要的環境變數。確保更新生產環境的值，包括：
BASE_URL ：將其設定為您的生產域。STRIPE_SECRET_KEY ：在生產環境中使用您的 Stripe 金鑰。STRIPE_WEBHOOK_SECRET ：使用您在步驟 1 中建立的生產 Webhook 中的 Webhook 金鑰。POSTGRES_URL ：將其設定為您的生產資料庫 URL。AUTH_SECRET ：將其設定為隨機字串。 openssl rand -base64 32將產生一個。 雖然此模板有意最小化並用作學習資源，但社區中還有其他功能更齊全的付費版本：
