TanStack 模板, 来自真实生产应用的实战经验

由一位在 Cloudflare Workers 上交付过 12+ 生产级 TanStack 应用的开发者手工打造 —— 不是生成器产物,不是模板套模板。每个启动器都包含了真实生产环境中踩过的坑,已经修好。

50+
TanStack 模板
10k+
下载量
100%
TypeScript
Aurelia No.7 landing page hero with editorial fountain pen presentationAstra Air Apple-like landing page hero with premium headphone conceptDashboard 01 approvals view hero screenshotTanStack Ship AI Workspace homepage hero with chat, knowledge base, and creditsTanStack Ship AI Image Studio homepage hero with generator demoAurelia No.7 landing page hero with editorial fountain pen presentationAstra Air Apple-like landing page hero with premium headphone conceptDashboard 01 approvals view hero screenshotTanStack Ship AI Workspace homepage hero with chat, knowledge base, and creditsTanStack Ship AI Image Studio homepage hero with generator demo
成为第一个评价此项目的人
Star on GitHub →

技术支持

TanStack Boilerplates — 现代技术栈

我们的 TanStack Templates 采用行业领先的技术和开发者工具构建,为您交付生产级应用提供一切所需。

Utility-First CSS

Tailwind CSS

使用 Tailwind CSS 工具类快速构建现代 UI,完全可定制且针对生产环境优化。

选择它而非 CSS-in-JS,因为零运行时开销 —— 冷启动时水合快 15-30ms。

自定义组件

Shadcn/ui

基于 Radix UI 和 Tailwind CSS 构建的漂亮、可访问的 UI 组件,随时可定制。

复制粘贴的所有权优于 npm 依赖锁定。我们控制每个组件变体。

状态管理

Zustand

使用 Zustand 的轻量高性能状态管理,非常适合可扩展的 React 应用。

选择它而非 Redux,因为 1KB 包体积且零样板代码。Redux Toolkit 多了 12KB 我们从不需要的代码。

认证系统

Better Auth

完整的身份验证解决方案,内置提供者、双因素认证和社交登录支持。

选择它而非 Auth.js/NextAuth,因为边缘运行时兼容且无需外部会话数据库。

类型安全数据库查询

Drizzle ORM

使用 Drizzle ORM 进行类型安全的数据库查询,确保 SaaS 的数据处理稳健可靠。

选择它而非 Prisma,因为 Cloudflare Workers 边缘运行时兼容 —— Prisma 引擎在生产中增加了 200-400ms 冷启动开销。

PostgreSQL 数据库

Supabase Database

内置 Supabase 集成,提供可扩展的实时数据库解决方案。

Postgres + 认证 + 存储一体化平台。适合希望从第一天起全部托管的团队。

PostgreSQL 数据库

Neon Database

Neon 提供的无服务器 PostgreSQL,为现代开发工作流提供自动扩展和分支功能。

无服务器 Postgres 支持分支 —— 非常适合预览部署。每个 PR 有自己的数据库副本。

边缘缓存

Upstash Redis

Upstash 的无服务器 Redis,用于超低延迟缓存和边缘速率限制。

边缘兼容的 Redis,按请求计费。解决了传统 Redis 的连接池耗尽问题。

AI 开发

AI SDK

Vercel AI SDK 集成,实现无缝 AI 功能,支持流式输出和多模型提供者。

跨提供商的统一流式接口。从 OpenAI 切换到 Anthropic 只需改一行代码。

AI 模型提供商

Open Router

通过 OpenRouter 访问 100 多个 AI 模型,包括 GPT-4、Claude 和 Gemini,统一 API 接口。

单一 API 接入 100+ 模型,支持回退路由。比维护每个提供商的直接集成更便宜。

AI 模型提供商

Replicate

使用 Replicate 运行开源 AI 模型,用于图像生成、视频创作等。

最适合开源模型托管(图像/视频生成)。按秒付费的 GPU 定价,无需管理基础设施。

邮件 API

Resend

使用 Resend 的现代邮件投递服务,支持 React 邮件模板和可靠的事务性邮件。

React Email 模板 + 开箱即用的 DKIM 处理。替代了我们自定义的 Postmark 方案 —— 更少的活动部件。

安全支付

Stripe

完整的 Stripe 集成,支持全球范围的订阅、一次性付款和基于用量的计费。

支付行业标准。Webhook 可靠性和文档质量在该领域无与伦比。

安全支付

Creem

面向开发者的替代支付方案 Creem,提供更简单的商户接入体验。

适用于所在地区无法使用 Stripe 的开发者的商户记录替代方案。全球处理 VAT/税务。

CDN 与文件存储

Cloudflare

Cloudflare R2 存储和 CDN,提供经济高效的全球分布式文件托管和交付。

R2 的出口流量成本是 S3 的 1/10。零出口费用意味着迁移后 CDN 账单下降了 90%。

部署

Vercel

一键部署到 Vercel,支持自动预览、边缘函数和全球 CDN。

预览部署和自动边缘缓存的最佳开发体验。在不需要 Workers 部署时的备选方案。

边缘计算

Cloudflare Workers

使用 Cloudflare Workers 在边缘运行代码,实现超低延迟的无服务器函数。

选择它而非 Lambda,因为 0ms 冷启动和原生 D1/KV/R2 绑定。默认部署在 190+ 城市。

AI 驱动的 TanStack Templates

TanStack Templates + AI = 即刻启动您的创意INSTANTLY

TanStack Templates 专为 AI 编码工具而设计。清晰的代码结构、一致的命名规范和精心组织的架构,让 AI 助手能够在几秒内构建完整功能。

与您喜爱的 AI 工具兼容

Claude
Codex
Gemini
Cursor
Copilot
Windsurf
借助 AI 更快构建

借助 AI 更快构建功能

几分钟而非几天内交付完整功能。AI 理解您的代码库结构,并在第一次尝试时生成上下文准确的代码。

自动强制执行最佳实践

每个功能都遵循行业最佳实践 — TypeScript、清晰的架构、适当的错误处理以及可随团队扩展的经过验证的模式。

集成您的 AI 工作流程

开箱即用,无缝兼容 Claude Code、Codex、Gemini、Cursor、GitHub Copilot、Windsurf 和其他 AI 编码助手。

精选 TanStack Templates

探索我们最佳的 TanStack Templates 与 Boilerplates

精心挑选的热门启动器,为现代 Web 开发树立标准。每个都生产就绪,基于 TanStack Router 构建。

Dashboard 01 approvals view hero screenshot
免费
仪表板

Dashboard 01

专注于审批、报告和日常运营的高效管理仪表板。

TanStack Ship AI Workspace homepage hero with chat, knowledge base, and credits
高级
SaaS

TanStack Ship AI 工作台

登录即用的 AI 工作台 — 对话、知识库、MCP 与积分。

TanStack Ship AI Image Studio homepage hero with generator demo
高级
SaaS

TanStack Ship AI 图像工作室

在同一工作区完成 AI 生图、编辑与放大。

最新 TanStack Templates

新启动器已发布

为什么选择我们的 TanStack Templates

TanStack Templates — 为现代开发而构建

使用 TanStack Templates 将创意转化为实际产品。现代化 UI、清晰的代码和强大的功能。更快发布,更智能扩展。

完全可定制

每个细节都能即时适配您的品牌。颜色、字体、布局和组件,均可通过清晰、结构良好的代码进行塑造。

更快交付

通过预先配置的基础组件,跳过数周的样板代码设置。认证、路由、数据获取和 UI 从第一次提交起就已就绪。

免费且开源

零成本起步,无隐藏费用或技术锁定。数千名开发者在生产项目中信赖免费层级。

AI 优化

一致的结构让 AI 工具能即时生成完整功能。几秒内完成过去需要数小时手动编码的工作。

生产就绪

经过实战检验的模式从第一天起就能处理真实流量。包含完整的 TypeScript、适当的错误处理和最佳实践架构。

开发者优先

零不必要的抽象拖慢您。清晰的代码和零配置麻烦意味着您专注于构建,而不是调试工具。

客户反馈

购买者如何评价 TanStack Ship

来自购买并使用我们模板交付的开发者的真实反馈。应要求隐去姓名。

Verified buyer

“TanStack Templates 为我们节省了数周的设置时间。代码库结构非常清晰,我们的 AI 助手立即理解并首次尝试就生成了准确的代码。”

VB

Verified buyer

SaaS 创始人(应要求隐去姓名)

Verified buyer

“我们在 2 周内而非 3 个月内交付了 SaaS。所需的一切 — 认证、计费、路由 — 都已预先连接且类型安全。绝对令人难以置信。”

VB

Verified buyer

SaaS 创始人(应要求隐去姓名)

Verified buyer

“AI 集成达到了全新水平。我将 Claude Code 指向仓库,它在几秒内就理解了整个架构。无需再解释上下文 — 它直接就能工作。”

VB

Verified buyer

首席工程师(应要求隐去姓名)

Verified buyer

“我用过的最好的 TanStack Templates。代码质量卓越 — TypeScript 无处不在、模式清晰、架构在团队扩展时优雅伸缩。”

VB

Verified buyer

高级开发人员(应要求隐去姓名)

Verified buyer

“从 Next.js 切换过来,再也没有回头。类型安全路由、更小的包体积、开发者体验遥遥领先。强烈推荐。”

VB

Verified buyer

全栈开发人员(应要求隐去姓名)

Verified buyer

“高级启动器物超所值。仅管理仪表板一项,从零开始就需要 3 个冲刺周期。现在我们专注于真正对用户重要的事情。”

VB

Verified buyer

产品负责人(应要求隐去姓名)

常见问题

常见问题解答

您需要了解的一切。找不到您想要的答案? 向我们的支持团队提问

你的下一款 SaaS 本周就能上线。

加入数千名使用 TanStack Templates 更快启动项目的开发者。免费开始,准备好时升级。每个启动器都生产就绪。