框架怎么选Convex Better Auth 六大主流框架React/Next.js/Expo/TanStack Start/SvelteKit/Hono集成对比【免费下载链接】better-authConvex Better Auth 项目地址: https://gitcode.com/gh_mirrors/con/better-authConvex Better Auth 是当下非常火热的全栈组合Convex 负责实时数据库与后端函数Better Auth 负责邮箱密码、社交登录、2FA 等全套认证能力。不过很多新手拿到这个组合后第一件事就是纠结——我该用哪个前端框架来接入它本文就为你带来Convex Better Auth 六大主流框架集成对比从集成难度、SSR 支持、社区维护状态三个维度讲清楚每种方案的优缺点帮你 5 分钟做出选型决策。为什么 Convex Better Auth 能成为认证标准答案在对比框架之前先简单认识一下这对黄金搭档Better Auth一个 TypeScript 优先的现代认证库内置邮箱密码、OAuth 社交登录、双因素认证2FA、组织与权限、会话管理等能力API 设计非常清爽。Convex集数据库与后端函数于一体的实时后端平台前端调用后端的体验像调用本地函数一样简单。两者结合后认证数据直接落在 Convex 的数据库里你不需要再维护一套独立的后端认证服务开发体验非常丝滑。项目仓库中已经内置了多个框架的完整可运行示例这是了解集成方式的最佳入口。六大框架集成对比总览表先把结论摆出来方便你快速定位框架集成成熟度SSR 支持适用场景是否官方示例Next.js⭐⭐⭐⭐⭐完善支持 RSC 预加载全栈 Web 应用✅ 官方示例React (Vite SPA)⭐⭐⭐⭐⭐无纯客户端前端单页应用✅ 官方示例Expo⭐⭐⭐⭐⭐无移动端iOS / Android 应用✅ 官方示例TanStack Start⭐⭐⭐⭐完善配合 TanStack Query追求类型安全的全栈应用✅ 官方示例SvelteKit⭐⭐⭐支持SSR 认证可选Svelte 生态用户⚠️ 社区维护Hono⭐⭐⭐⭐不适用纯后端路由API 网关 / 自定义后端✅ 官方文档 快速结论Web 全栈首选 Next.js纯前端 SPA 用 React移动端用 ExpoSvelte 忠实用户选 SvelteKit想把认证挂在自定义 API 上选 Hono。1️⃣ Next.js 集成全栈 Web 开发的最省心方案Next.js 是这套组合中集成度最高的框架官方提供了convex-dev/better-auth/nextjs工具包内置了handler、preloadAuthQuery、isAuthenticated、getToken等一批开箱即用的服务端工具函数。Next.js 方案的核心优势支持服务端组件RSC中预加载认证查询配合usePreloadedAuthQuery实现首屏零闪烁认证路由通过app/api/auth/[...all]/route.ts代理到 Convex配置一次即可fetchAuthQuery/fetchAuthMutation让 Server Action 里调用认证相关逻辑变得非常简单。官方完整示例位于仓库的examples/next目录包含登录、注册、双因素认证、重置密码等全套页面几乎可以照着抄。2️⃣ React (Vite SPA) 集成纯前端项目的跨域方案如果你的项目是传统的纯前端单页应用比如 Vite React没有服务端渲染需求那么 React 集成方案是最直接的。它的关键在于cross-domain 跨域插件认证请求直接打到 Convex 的.site域名上所以必须在 Better Auth 实例中配置crossDomain({ siteUrl })插件路由注册时需要开启{ cors: true }以支持跨域客户端用crossDomainClient()插件配合expectAuth: true可以让未登录用户不发任何后端请求。这套方案的核心代码都在examples/react目录中适合快速搭建一个带认证的 Vite 项目。3️⃣ Expo 集成移动端认证的完整链路Expo 是移动端React Native的标准答案。Convex Better Auth 的 Expo 方案覆盖了从登录到 Token 安全存储的完整链路使用expo-secure-store安全存储 Cookie避免明文泄露需要同时启用expo()与convex()两个插件社交登录的回调地址基于 Convex.site域名配置还支持 Expo Web通过Platform.OS web判断自动切换跨域插件与 Expo 客户端插件。需要特别注意的是expoClient与crossDomainClient不能同时存在于客户端实例中官方文档对此有明确提醒。4️⃣ TanStack Start 集成类型安全爱好者的进阶之选TanStack Start 是 TanStack 家族的全栈框架它和 Convex Better Auth 的结合方案同样有官方示例examples/tanstack。这套方案的特色在于通过convexBetterAuthReactStart工具包提供 SSR 与 server function 支持与 TanStack Query 深度配合用ensureQueryDatauseSuspenseQuery做服务端渲染需要把convex-dev/better-auth加入 Vite 的ssr.noExternal配置避免模块解析问题。适合喜欢 TanStack 生态、追求极致类型安全的开发者。5️⃣ SvelteKit 集成由社区维护的可用方案SvelteKit 的支持目前是社区维护状态依赖mmailaender/convex-better-auth-svelte包但功能相当完整提供createSvelteKitHandler处理认证路由通过 SvelteKit hook 自动提取认证 Token服务端加载函数里无需手动传参支持 SSR 认证通过getAuthState在服务端获取登录状态避免页面加载时的登录态闪烁。如果你是 Svelte 忠实用户这套方案完全够用但要注意它依赖第三方维护遇到问题需要到对应仓库反馈。6️⃣ Hono 集成把认证挂在自定义 API 上最后一种方案有些特殊Hono 不是前端框架而是轻量级后端框架。如果你不想使用 Convex 默认的 HttpRouter而是更习惯 Hono 的路由与中间件体系可以用HttpRouterWithHono无缝替换通过app.on([POST, GET], /api/auth/*, ...)挂载认证处理器纯客户端项目如 React/Vite需要额外配置 CORS 中间件。Hono 方案适合把认证能力整合进自定义 API 网关的场景配置文档见docs/content/docs/integrations/hono.mdx。快速上手用官方示例跑通整套流程选好了框架最快的学习方式是直接跑仓库里的示例克隆仓库git clone https://gitcode.com/gh_mirrors/con/better-auth安装根目录依赖npm install进入某个示例目录如examples/next安装依赖执行npx convex dev --once初始化数据库运行npm run dev启动项目。各框架的完整安装步骤都沉淀在docs/content/docs/framework-guides/目录下按需查阅即可。最终选型建议一张图看懂怎么选你的情况推荐方案理由开发全栈 Web 应用Next.js集成最成熟SSR 体验最佳已有 Vite / 纯前端项目React (SPA)跨域插件方案简单直接开发手机 AppExpo移动端链路完整含安全存储TanStack 生态爱好者TanStack Start类型安全体验拉满Svelte 生态用户SvelteKit功能完整注意社区维护属性自定义 API 网关Hono灵活路由 中间件生态写在最后Convex Better Auth最吸引人的地方在于无论你选择哪个框架核心认证逻辑几乎不用重写——登录、注册、2FA、社交登录全都由 Better Auth 统一提供你只需要按框架对接一层壳即可。这也让框架选型的成本变得很低跟着上表对号入座今天选 Next.js 明天换 TanStack业务代码基本零改动。如果你还在犹豫最简单的答案就是Web 选 Next.js移动端选 Expo这两个方案的示例最完整、踩坑最少几乎可以无痛跑通。动起手来去仓库跑一个示例十分钟后你就知道自己该选谁了【免费下载链接】better-authConvex Better Auth 项目地址: https://gitcode.com/gh_mirrors/con/better-auth创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考