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

內建認證、計費與 AI 的 Next.js SaaS 範本

supastack 是一套 Next.js 16 SaaS 範本:登入、團隊、計費、AI 聊天、管理後台、多語言與主題,第一天就能部署的真實應用。

Noah Zixin Zhang約 2 分鐘閱讀

supastack 的 Next.js 應用程式包含什麼?

取決於所選方案,但每份授權都交付同一個完整的 Next.js 16 應用:OAuth、通行金鑰與兩步驟驗證登入、團隊工作區、涵蓋八家支付供應商的計費、按工作區預算的 AI 聊天、管理後台與 13 種語言。單平台授權只涵蓋 Next.js;完整包在同一後端上再增加 TanStack Start、Expo 與 Tauri 應用。

SaaS 所需的一切,都已內建

Next.js 應用就是完整的 supastack 產品:買家在示範中看到的同一套儀表板、設定頁和管理介面。你要做的不是拼裝產品頁,而是從成品中刪掉不需要的部分。

  • Google、Apple、GitHub 與電子郵件魔法連結登入,另有通行金鑰、兩步驟驗證與工作階段管理
  • 工作區、角色與團隊邀請,支援按成員設定權限
  • 計費:結帳、客戶入口與簽章 Webhook,涵蓋 Stripe、Paddle、Polar、Lemon Squeezy、Dodo、Creem、Whop 與 PayPal
  • AI 聊天與背景代理任務,支援按工作區的預算與 token 用量追蹤
  • 通知、動態消息、意見收件箱,以及所有交易郵件的預覽
  • 管理介面:數據分析、搜尋、成員與安全工作階段
  • 13 種語言、20+ 主題包,以及完整 OpenAPI 文件化的 API
  • 種子資料、真實測試與涵蓋安裝到部署的指南

以 Next.js 團隊熟悉的方式建構

應用運行在 Next.js 16 與 App Router 之上:React Server Components 帶來快速首屏,route handlers 承載 API 端點,需要的地方使用串流渲染。整個 Turbo monorepo 端到端型別安全,一個下午就能讀完。

產品邏輯沉澱在共享套件裡,認證、資料庫 Schema、郵件、任務、計費與 AI 供應商,框架層保持輕薄。更換供應商、釐清 webhook 結算流程只需幾分鐘,而不是考古。

  • Next.js 16 App Router + React 19
  • React Server Components (RSC) + Server Actions
  • TypeScript + Turborepo
  • Better Auth
  • Drizzle + PostgreSQL
  • Trigger.dev
  • Sentry + PostHog

一個產品,四套技術堆疊

supastack 是同一個 SaaS 的四種形態:這個 Next.js 應用、一個 TanStack Start 應用、一個面向 iOS 與 Android 的 Expo 應用,以及一個 Tauri 桌面應用。它們共用同一後端,在網頁上建立的工作區會出現在手機裡。

一份授權涵蓋全部四個應用。只想要這一個堆疊也有單平台方案,但隨時可以再加上其他平台。

從複製到上線

複製儲存庫、填寫環境變數、執行遷移,應用就會帶著可以直接點擊體驗的種子資料啟動。五分鐘快速上手指南帶你走完整個流程,各供應商指南則涵蓋你要啟用的每一項整合。

  • 一次安裝、一條開發指令,首次執行即寫入示範工作區
  • 可部署到 Vercel、Docker、Node 或 Cloudflare Workers
  • 可選供應商在未設定金鑰前保持關閉,缺金鑰也不會當機

常見問題

  • Next.js 應用是真實產品還是元件庫?, 真實產品。它交付完整的產品面,登入、導入、儀表板、計費、設定與管理後台,運行在真實後端之上。本站所有截圖都來自它的真實介面。
  • Next.js 應用可以部署到哪裡?, 任何 Next.js 能運行的地方:Vercel、VPS 上的 Docker、Netlify、Bun 或 Cloudflare Workers。部署指南涵蓋每種目標,且啟動不強制要求任何供應商,所有整合都是可選的。
  • 包含 AI 功能嗎?, 包含,串流 AI 聊天、背景代理任務、按工作區的預算與 token 用量追蹤,填入 OpenAI、Anthropic 或 OpenRouter 金鑰即可使用。

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

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