> ## Documentation Index
> Fetch the complete documentation index at: https://supastack.dev/llms.txt
> Use this file to discover all available pages before exploring further.
> For the full documentation corpus in one file, fetch: https://supastack.dev/llms-full.txt

# 技術棧

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

## 開始之前

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

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

[安裝工具並獲取程式碼](https://supastack.dev/zh-tw/docs/web/before-you-start.md)

[學習命令、檔案和配置](https://supastack.dev/zh-tw/docs/web/terminal-basics.md)

[完成Web首次執行教程](https://supastack.dev/zh-tw/docs/web/ship-in-5-minutes.md)

```
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](https://nextjs.org) 16 與 [React](https://react.dev) 19 伺服器元件之上。

- [Next.js](https://nextjs.org)
- [React](https://react.dev)


## TypeScript + Turborepo

[TypeScript](https://www.typescriptlang.org) 嚴格模式適用於整個 pnpm 工作區，[Turborepo](https://turborepo.com) 負責協調構建。

- [TypeScript](https://www.typescriptlang.org)
- [Turborepo](https://turborepo.com)


## Better Auth

[Better Auth](https://better-auth.com) 是身份引擎；希望統一使用 Auth.js 的團隊也可選用 Auth.js 引擎。

- [Better Auth](https://better-auth.com)


## Drizzle + PostgreSQL

持久化通過 [PostgreSQL](https://www.postgresql.org) 上的 [Drizzle](https://orm.drizzle.team) ORM 實現——即每條記錄所經過的 schema 與輔助方法。

- [Drizzle](https://orm.drizzle.team)
- [PostgreSQL](https://www.postgresql.org)


## 計費

預設使用 [Stripe](https://stripe.com) 計費，並附帶 [Lemon Squeezy](https://www.lemonsqueezy.com) 介面卡。

- [Stripe](https://stripe.com)
- [Lemon Squeezy](https://www.lemonsqueezy.com)


## Trigger.dev

後臺任務執行在 [Trigger.dev](https://trigger.dev) 上。

- [Trigger.dev](https://trigger.dev)


## 事務性郵件

事務性郵件通過 [Resend](https://resend.com) 或 AWS SES 傳送。

- [Resend](https://resend.com)


## Sentry + PostHog

可觀測性由 [Sentry](https://sentry.io) 與 [PostHog](https://posthog.com) 提供。

- [Sentry](https://sentry.io)
- [PostHog](https://posthog.com)


## Expo

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

- [Expo](https://expo.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
```


## 下一篇

[本地安裝](https://supastack.dev/zh-tw/docs/web/local-setup.md)