React 新选择：TanStack Start、shadcn v2 与 Better Auth 实践心得

多年来，我一直是一名 Next.js 开发者。它曾是我首选的框架、我的舒适区，也是我“随手启动一个新 Next 应用”的解决方案。但最近，我总感觉有些不对劲。App Router 的复杂性、持续的破坏性变更、RSC 问题，以及那个以 Vercel 为中心的生态系统，都让我感到困扰。

于是，我决定尝试一些新东西。坦白说，我一点也不后悔。

改变一切的技术栈

以下是我现在使用的技术栈：

• TanStack Start (React 19 + Vite 7)
• shadcn/ui v2 (Base UI + Tailwind 4)
• Better Auth (TypeScript 优先的身份验证)

让我来告诉你为什么它们中的每一个都堪称颠覆性的存在。

TanStack Start：一个被低估的 Next.js 替代方案

你一定知道 Tanner Linsley 吧？就是那个开发了 React Query、React Table 和 React Router 的大神？没错，他构建了一个全栈 React 框架。而且，这个框架非常棒。

TanStack Start 为你提供了：

• React 19 及其所有新特性 (服务器组件 (Server Components)、操作 (Actions) 等等)
• Vite 7 作为打包工具 (告别 webpack 的噩梦)
• 基于文件的路由，设计得非常合理
• 完整的 SSR/SSG 支持，无需费脑筋

开发者体验 (DX) 令人难以置信。热重载是即时的，构建速度飞快。最重要的是——它不会试图将你锁定在任何特定的部署平台上。

// 它只是……纯粹的 React。干净，简单。
import { createFileRoute } from "@tanstack/react-router"

export const Route = createFileRoute("/")({
  component: HomePage,
})

function HomePage() {
  return <div>Hello, freedom!</div>
}

再也不用到处写 “use client” 指令了，也不用再纠结你的组件是服务器端还是客户端。它就是纯粹的 React。这种自由的感觉，在探索 前端框架与工程化 的众多可能性时尤为重要。

Shadcn V2：颠覆性的改变

好了，让我们来谈谈今天真正的主角。

如果你用过 shadcn/ui，你就会知道它有多棒。你可以直接复制粘贴组件，对自己的代码拥有完全所有权。而 v2 版本带来了质的飞跃。

CSS 变量驱动的主题

v2 版本的主题定制是这样的：

:root {
  --primary: oklch(0.55 0.22 25);
  --primary-foreground: oklch(0.98 0.01 25);
}

.dark {
  --primary: oklch(0.65 0.20 25);
}

无需 JavaScript，无需主题提供器 (theme providers)。只需随处可用的 CSS 变量。

组件质量

每个组件都经过了重新设计，对细节的关注令人惊叹：

• 恰当的焦点管理 (focus management)
• 真正可用的键盘导航
• 感觉如原生般的动画效果
• 不再像是事后才添加的暗黑模式 (Dark mode)

我花了一个小时把玩下拉菜单。嵌套子菜单、复选框项目、单选按钮组——一切都太惊艳了。

Better Auth：不再糟心的身份验证

我试过所有方案：NextAuth (现在叫 Auth.js)、Clerk、Supabase Auth、Firebase。它们都有各自的取舍。

然后我发现了 Better Auth。

这是一个 TypeScript 优先的身份验证库，它：

• 适用于任何框架（不仅仅是 Next.js！）
• 开箱即用地支持 OAuth 提供商
• 拥有简洁明了的 API
• 将 session 存储在你自己的数据库中

配置 Google OAuth 的过程简单得令人耳目一新：

import { betterAuth } from "better-auth"
import { prismaAdapter } from "better-auth/adapters/prisma"

export const auth = betterAuth({
  database: prismaAdapter(prisma, { provider: "postgresql" }),
  socialProviders: {
    google: {
      clientId: process.env.GOOGLE_CLIENT_ID!,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET!,
    },
  },
})

在客户端：

import { signIn, useSession } from "@/lib/auth-client"

// 使用 Google 登录
await signIn.social({ provider: "google" })
// 获取当前会话
const { data: session } = useSession()

就这样。无需用 provider 包装你的应用，没有复杂的配置。它就是能用。最棒的是什么？首次使用的用户会自动注册，无需为 OAuth 单独设置注册流程。这种将身份验证逻辑与后端无缝集成的体验，在处理诸如 Node.js 数据库适配器时，显得格外清晰高效。

完整蓝图

下面是我的项目结构：

src/
├── components/
│   ├── ui/           # shadcn components
│   ├── mode-toggle.tsx
│   └── user-menu.tsx
├── lib/
│   ├── auth.ts       # Better Auth server
│   ├── auth-client.ts
│   └── utils.ts
├── routes/
│   ├── api/auth/$.ts # Auth API handler
│   ├── __root.tsx
│   ├── index.tsx
│   └── login.tsx
└── styles.css        # Tailwind + theme

所有东西都位于同一处 (colocated)。所有东西都有类型定义。所有东西都很快。

你应该切换吗？

听着，我不是说 Next.js 不好。它仍然是一个拥有庞大生态系统的优秀框架。

但如果你正为以下问题而感到痛苦：

• 持续不断的破坏性变更 (breaking changes)
• 令人困惑的服务器组件 (Server Component) 边界
• 对 Vercel 平台锁定的担忧
• 缓慢的开发构建速度

……那么，也许是时候探索其他选择了。

TanStack Start 已经为生产环境准备就绪。shadcn v2 是一次巨大的升级。Better Auth 提供了我们应得的身份验证开发体验 (DX)。

React 生态系统远比 Next.js 广阔。在即将到来的 2026 年，我们拥有了更多选择。如果你也对这类技术栈的实践与讨论感兴趣，欢迎来 云栈社区 与更多开发者交流心得。