For AI agents: fetch the complete documentation index at /llms.txt, the full documentation corpus at /llms-full.txt, the agent skill at /skill.md, or this page as Markdown at /zh-tw/docs/web/tech-stack.md (or send Accept: text/markdown).

技術棧

套件背後的技術及其各自的作用。

詢問本指南

開始之前

使用“檔案”→“開啟資料夾”在 Visual Studio Code 中開啟下載的 supastack 專案，然後選擇“終端”→“新建終端”。儲存庫根目錄是包含 package.json、apps 和 packages 的資料夾。執行下面的命令並保持終端開啟。如果無法識別命令，請先完成工具安裝指南，然後再繼續。

首先閱讀平臺教程。伺服器是響應瀏覽器或電話請求的應用程式程式。 Web 讀取 apps/web/.env.local，Expo 讀取 apps/mobile/.env.local，資料庫遷移命令讀取 root .env。無資料庫/儀錶板演示與真實/身份驗證帳戶分開，需要遷移Postgres。僅電話或桌面結帳需要單獨執行的 Web 後端。

corepack pnpm --filter @supastack/web dev

應用棧

Web 應用是由共享 TypeScript 包組成的 Next.js 應用——同一套包同時驅動 Expo 移動應用。產品介面使用基於設計令牌的 CSS Modules，因此沒有需要除錯的執行時 CSS-in-JS，物件儲存相容 S3。以下工具都是刻意選擇的預設項。

Next.js + React

Web 應用執行於採用 App Router 的 Next.js 16 與 React 19 伺服器元件之上。

TypeScript + Turborepo

TypeScript 嚴格模式適用於整個 pnpm 工作區，Turborepo 負責協調構建。

Better Auth

Better Auth 是身份引擎；希望統一使用 Auth.js 的團隊也可選用 Auth.js 引擎。

Better Authbetter-auth.com

Drizzle + PostgreSQL

持久化通過 PostgreSQL 上的 Drizzle ORM 實現——即每條記錄所經過的 schema 與輔助方法。

計費

預設使用 Stripe 計費，並附帶 Lemon Squeezy 介面卡。

Trigger.dev

後臺任務執行在 Trigger.dev 上。

Trigger.devtrigger.dev

事務性郵件

事務性郵件通過 Resend 或 AWS SES 傳送。

Resendresend.com

Sentry + PostHog

可觀測性由 Sentry 與 PostHog 提供。

Expo

Expo 移動應用使用同一套 TypeScript 包，因此契約變更可同時對兩個端進行型別檢查。Expo 支援構建 iOS 和 Android 版本。

Expoexpo.dev

共享模組

每個橫切能力都位於一個帶有小契約的包中:auth、db、billing、ai、jobs、email、storage、observability、config、i18n 和 api。應用程式組合它們;產品領域邏輯留在套件之外。

每個由提供商支撐的模組都包含一個 fake 或本地介面卡,因此預設的測試與開發迴圈永遠不會呼叫付費服務。

驗證工具

Vitest 覆蓋單元和整合行為,Playwright 覆蓋瀏覽器流程,ESLint 加 Prettier 保持程式碼一致。確定性測試套件無需提供商憑據即可執行;真實提供商驗收是一條單獨的可選路徑。

corepack pnpm test          # deterministic unit + integration
corepack pnpm check         # lint, types, tests, format
corepack pnpm build         # production builds
corepack pnpm test:e2e      # browser flows

技術棧