跳过主要内容
全部文章
技术

TanStarter 的技术栈

TanStarter 背后的技术选择，以及我们为什么这么选。

从零开始做一个 SaaS 项目，意味着你还没写任何真正的产品代码，就要先选择 framework、数据库、认证库、支付集成、CSS 方案和部署平台。TanStarter 已经把这些全部连接好。下面是它包含的内容和背后的原因。

快速参考

#层级技术
1FrameworkTanStack Start
2DatabaseCloudflare D1 + Drizzle ORM
3StorageCloudflare R2
4CacheCloudflare KV
5DeploymentCloudflare Workers
6AICloudflare Workers AI + TanStack AI
7EmailCloudflare Email Service / Resend
8AuthenticationBetter Auth
9PaymentsStripe / Creem / Waffo
10NewsletterResend / Beehiiv
11LocalizationParaglide + Inlang
12UITailwind CSS + Shadcn UI + Base UI

1. TanStack Start

Framework 使用 TanStack Start，这是一个全栈 React framework。它通过 TanStack Router 提供文件路由，通过 TanStack Query 管理 server state。所有内容都以 TypeScript 为优先，因此 route params、loader data 和 server function inputs 都会被类型检查。

2. Database: Cloudflare D1 + Drizzle ORM

数据库使用 Cloudflare D1，这是运行在边缘的 serverless SQLite 数据库。Drizzle ORM 架在其上，提供类型安全查询、schema migrations 和可视化 studio，方便浏览数据表。你不需要维护数据库服务器。

3. Storage: Cloudflare R2

文件存储使用 Cloudflare R2。用户可以上传文件，并为每个文件设置 public 或 private access。文件通过 Wrangler bindings 访问，因此不需要管理 S3 API keys。

4. Cache: Cloudflare KV

mkfast Template 内置 Cloudflare KV 作为可选缓存层，用来处理读多写少的 server data。

它适合 Newsletter 状态检查、公开列表、重复第三方 API 响应这类低风险数据。支付、认证、额度等关键状态仍然应该放在 D1 或对应服务里。

5. Deployment: Cloudflare Workers

应用部署到 Cloudflare Workers。编译后的模板约 2 MB，可以放进免费计划。运行 pnpm deploy 即可上线。

6. AI: Cloudflare Workers AI + TanStack AI

TanStarter 内置完整 AI playground，由 TanStack AI、Cloudflare Workers AI 和 fal.ai adapters 驱动。

  • Cloudflare Workers AI：通过 REST API 在边缘运行 AI 模型，包括文本处理（BART 摘要、M2M100 翻译）、chat（Llama 3.1）和图像生成（Flux、SDXL、DreamShaper）。
  • TanStack AI：提供跨 AI provider 的统一 adapter layer。你可以在 Cloudflare Workers AI 和 fal.ai 之间切换，而不需要改应用代码。
  • fal.ai：通过 @tanstack/ai fal adapter 提供额外图像生成（Gemini、Flux、GPT Image 2）和图像编辑（Gemini 2.5 Flash）能力。

7. Email: Cloudflare Email Service + Resend

邮件由两个 provider 处理。Cloudflare Email Service（Routing Rules）可将入站邮件转发到你的应用，同时避免暴露个人邮箱，适合 support@yourdomain.com 这类支持别名。Resend 通过 React Email templates 处理出站事务邮件，例如欢迎邮件、密码重置等，让你无需手写复杂 HTML 就能构建好看的邮件。

两者都通过 src/mail/ 中的 provider interface 集成，因此你可以按需替换或组合使用。

8. Authentication: Better Auth

认证使用 Better Auth。开箱即可获得邮箱/密码登录、Google OAuth、密码重置、账号删除、admin/user 两种角色，以及用于保护路由的 middleware。无需额外配置即可工作。

9. Payments: Stripe / Creem / Waffo

支付通过 Stripe、Creem 或 Waffo 运行。一次性购买、循环订阅、免费试用、customer portal、webhook handling 和 pricing UI components 都已包含。支付模块基于 provider interface 构建，因此之后切换到其他 provider 也很直接。

10. Newsletter: Resend / Beehiiv

Newsletter 订阅由 Resend 或 Beehiiv 处理。两个 provider 都提供 API 驱动的邮件 campaign、audience management 和 analytics。

11. Localization: Paraglide + Inlang

多语言由 Paraglide 和 Inlang 提供。默认项目已经内置英文和中文，翻译后的 UI 文案存放在 project.inlang/messages/。

路由通过 Paraglide middleware 感知当前语言，因此中文页面使用 /zh 前缀，基础语言保留干净的默认 URL。博客、法律页面和 changelog 可以通过 .zh.md 这类 locale suffix 提供本地化版本，内容加载器会把本地化文档解析到同一个 slug。

SEO 也会跟随语言变化：页面 metadata、<html lang>、Open Graph locale tags、canonical URLs、sitemap entries 和 hreflang alternates 都会根据当前语言生成。支付 checkout 和 billing portal 流程也会在 provider 支持时接收当前语言。

12. Tailwind CSS, Shadcn UI, and Base UI

样式使用 Tailwind CSS v4。UI 组件来自 Shadcn UI（预设样式、可访问性良好）和 Base UI（unstyled primitives，适合需要完全控制的场景）。Landing page 包含 12+ marketing blocks，可自由重排或删除。