跳轉到內容
Supastack
TW
主題
登入獲取 Supastack
全部文章

一套 TanStack Start SaaS 起步套件,完整產品,跑在 Vite 上

supastack 提供完整的 TanStack Start 應用:型別安全路由、伺服端函式、認證、計費、AI 與管理後台,與 Next.js 版本相同的 SaaS,位於同一 monorepo。

Noah Zixin Zhang約 2 分鐘閱讀

supastack 的 TanStack Start 應用程式包含什麼?

取決於所選方案,但每份授權都交付運行在 Vite 與 TanStack Router 上的完整 supastack 產品:型別安全的檔案式路由與 SSR、伺服器函式、認證、工作區、涵蓋八家支付供應商的計費、AI 助手,以及附 OpenAPI 參考的管理後台。它與 Next.js 應用讀取同一個 Schema 與同一批套件,兩個 Web 前端可以跑在同一個後端上。

完整的 SaaS,而非一角

大多數 TanStack 起步範本止步於登入頁和待辦清單。我們渲染的是 supastack 的完整介面,與 Next.js 應用提供的同一套頁面,所以選擇 TanStack Start 絕不意味著接受縮水的產品。

  • 首頁儀表板、數據分析與全站搜尋
  • 成員、邀請、安全工作階段與 SSO 設定
  • 計費:結帳、方案與簽章 Webhook,涵蓋八家支付供應商
  • AI 助手與背景代理任務,支援工作區級預算
  • 內建 OpenAPI 文件與在應用內開啟的 API 參考頁
  • 導入、通知、郵件預覽與意見收件箱
  • 13 種語言與 20+ 主題包,共享同一設計系統

團隊選擇 TanStack Start 的理由

Vite 8 秒速啟動,TanStack Router 提供端到端型別安全的檔案式路由,伺服端函式讓資料變更緊鄰呼叫它的程式碼。這是現代 React 堆疊,卻沒有框架鎖定。

兩個 Web 應用共享同一批套件,認證、資料庫、計費、AI、任務、郵件,功能在兩個端同步落地,你的產品邏輯永不分叉。

  • TanStack Start + React
  • TanStack Start + Vite
  • 型別安全的檔案式路由與 SSR
  • TypeScript + Turborepo
  • Better Auth
  • Drizzle + PostgreSQL
  • Sentry + PostHog

兩套 Web 堆疊,一個後端

因為團隊偏好 Vite 與 TanStack 生態而選擇 TanStack Start,或者兩個 Web 應用一起發。它們讀取同一個 Schema 與同一批套件,一次開發的功能在兩個前端上都能用。

每份授權都包含兩個 Web 應用外加 Expo 與 Tauri。只想要這一個堆疊也有單平台方案。

從複製到上線

一次安裝,把應用指向共享資料庫,Vite 開發伺服器幾分鐘內就會帶著種子資料跑起來。正式環境建構開箱即可作為 Node 伺服器運行,其他部署目標可走 Nitro 預設。

  • 同一 monorepo、同一批套件,一次安裝涵蓋所有應用
  • 型別安全路由讓產品做大後的重構依舊可靠
  • 指南與 Next.js 版本一一對應,學習曲線保持平坦

常見問題

  • TanStack Start 應用功能完整嗎?, 完整。它渲染與 Next.js 應用相同的產品面,首頁、數據分析、成員、安全工作階段、計費、設定與 OpenAPI 參考頁,並經過同樣的測試。
  • 該選 Next.js 還是 TanStack Start?, 選團隊比較喜歡的框架,反正兩個都會得到。我們的比較文章詳細拆解了取捨。
  • 它和 Next.js 應用共用資料庫嗎?, 是的。兩個 Web 應用透過同一批套件讀取同一個 Schema,你可以讓單個或兩個前端都跑在同一個後端上。

下一個產品,從這裡開始。

一次付費,持續打造盈利的產品。