create-t3-app 官方推荐配套生态状态管理、组件库、动画与部署基础设施选型指南【免费下载链接】create-t3-appThe best way to start a full-stack, typesafe Next.js app项目地址: https://gitcode.com/gh_mirrors/cr/create-t3-appcreate-t3-app自带的 tRPC、Prisma/Drizzle、Tailwind CSS 与 NextAuth/Better Auth 组合并不能解决所有问题。本文以仓库文档 www/src/pages/es/other-recs.md 为骨架系统梳理官方协作团队非官方背书对状态管理、组件库、动画、部署基础设施、数据分析与打包分析等方向的高频推荐并结合 cli/src/installers 与 cli/template/extras 中的真实脚手架实现说明这些推荐如何与 T3 技术栈自然衔接。读完本文你将掌握在 T3 App 上扩展服务端/客户端状态、构建可访问 UI、添加动画、选择托管与数据库服务时的完整选型思路与落地要点。重要前提以下所有推荐均来自 create-t3-app 的个人维护者不代表 create-t3-app 团队或 T3-OSS 的官方背书。文档原文特别强调——尤其在承诺使用付费服务之前请务必自行调研Haz tu propia investigación。一、为什么默认脚手架不够用以及何时该引入新库文档开篇即承认create-t3-app内置的库无法解决所有问题。CLI 默认脚手架见 cli/src/cli/index.ts只包含nextAuth、prisma、tailwind、trpc、eslint五个默认选项加上可选加入的betterAuth、drizzle、biome、dbContainer可安装包清单见 cli/src/installers/index.ts。项目一旦超出这些范围就需要自行补充第三方包。选型的第一原则是只在确有需要时引入。以状态管理为例文档给出了非常清晰的决策顺序服务端状态交给 tRPC 的 React Query hooks无需额外状态库客户端状态先用 React 自带的useState只有当你确实需要更多能力时再考虑下面推荐的选项。这个建议与脚手架内部实现完全一致tRPC 安装器cli/src/installers/trpc.ts会为 App Router 项目自动安装tanstack/react-query、superjson、trpc/server、trpc/client、trpc/react-query与server-only为 Pages Router 项目额外安装trpc/next。也就是说从项目生成的第一天起服务端状态缓存server state就已经由 TanStack Query 托管这也是文档敢于建议先用 React Query 顶住服务端状态的底层原因。二、状态管理先评估必要性再选 Zustand 或 Jotai文档在状态管理一节中给出了两条路线均出自 Poimandres 组织。Zustand告别 ReduxZustand 被文档称为你从不知道你需要的现代、简单的 Redux——它足够轻量可以支撑从视频通话应用、游戏到服务端的各种场景。它适合那些你熟悉 Redux 心智模型、但不想再背负样板代码的团队。Jotai告别 ContextJotai 走的是原子化atomic路线允许你定义感觉像全局useState的单例singletons非常适合那些还不需要引入状态机state machine的有状态行为。如果你发现自己为了共享状态而层层嵌套 Context ProviderJotai 是更轻的替代方案。与 T3 脚手架的衔接点React Query 的默认配置无论选择哪条路线T3 脚手架中 React Query 的默认配置都值得了解因为它决定了服务端状态这条线的默认行为。脚手架生成的 cli/template/extras/src/trpc/query-client.ts 做了三件事将查询staleTime默认设为30 * 100030 秒避免 SSR 场景下客户端一挂载就立刻重新请求用SuperJSON.serialize序列化 dehydration 数据、SuperJSON.deserialize反序列化 hydrate 数据保证Date等复杂类型跨网络/跨端不丢失通过shouldDehydrateQuery让pending状态的查询也能被脱水配合 React Query 的流式 SSR。这意味着当你决定引入 Zustand/Jotai 管理客户端状态时请继续保持 tRPC 查询走 React Query 通道让状态库只负责 UI 局部状态两条线互不干扰。三、组件库先分清无样式与有样式大多数应用都需要同一批基础组件——开关按钮、下拉菜单、对话框等。文档将组件库分成两类选型时应先明确你的诉求。无样式headless组件库为可定制而选无样式组件库提供未装饰但可访问的组件样式完全交给你。文档推荐三个Radix UI提供一组强大、便捷、可访问的原语primitives可用原生 CSS 或 Tailwind CSS 自由造型。它只负责交互与可访问性是构建自有设计系统的地基Headless UI由 Tailwind CSS 团队出品与 Tailwind CSS 无缝集成适合本来就采用 Tailwind 的 T3 项目React Aria来自 Adobe React Spectrum为设计系统提供可访问的 UI 原语其 Date Picker日期选择器组件被文档评价为一流水平。这三者与 T3 技术栈的契合点在于T3 默认安装 Tailwind CSScli/src/installers/tailwind.ts 会写入tailwindcss、postcss、tailwindcss/postcss三个开发依赖并生成postcss.config.js与src/styles/globals.css而 headless 库恰好把样式层留给你用 Tailwind 工具类补齐分工干净。有样式组件库为开箱即用而选当你做管理后台Admin Dashboard之类只要界面看起来体面的项目时文档推荐Chakra UI与Mantine。它们自带完整主题与组件外观部署即好看适合追求开发速度、不想从零打磨设计系统的场景。Class Variance AuthorityCVA构建你自己的 UI 库当项目规模增长到希望用 Tailwind 维护一套带多种颜色、尺寸变体的标准化组件时文档推荐CVA。它以声明式方式定义组件的变体variants是介于直接用 headless 原语与直接用成品组件库之间的中间层——用 headless 库保证可访问性用 CVA 管理 Tailwind 类名的变体组合从而沉淀出团队自己的组件库。四、动画从一行代码到声明式复杂动画文档将动画场景也分成两档AutoAnimate零配置一行代码即可给元素切换进入/离开/列表重排加上平滑动画适合用最小成本显著提升 UX的诉求。文档评价大多数动画库试图覆盖所有用例反而显得笨重AutoAnimate 的取舍是少即是多Framer Motion提供简洁的声明式语法用更少的代码实现从复杂动画到手势gestures的能力适合需要精细控制、交互动效较多的场景。五、部署、基础设施、数据库与 CI核心托管选型这是文档篇幅最重的一部分覆盖从托管、数据库到消息推送的完整后端配套。其中 Vercel 是文档明确推荐用于部署 Next.js 应用的首选详见仓库内的 Vercel 部署指南。Vercel托管你的应用文档对 Vercel 的评价是把Web 部署的混乱变成了接入 GitHub 后一劳永逸的集成团队曾在其上毫无问题地扩展到数十万用户规模AWS 驱动只是界面更好用。对 Next.js 项目而言Vercel 是文档中最直接的部署答案。如果走 Vercel 面板路线核心操作只有四步登录后创建新项目、导入 GitHub 仓库、填入环境变量、点击部署——之后每次推送到仓库都会自动触发重新部署。若想用配置文件显式声明构建行为可在项目根目录创建vercel.json{ buildCommand: npm run build, outputDirectory: dist, devCommand: npm run dev, installCommand: npm install }完整面板流程截图与说明见 Vercel 部署指南。若偏好命令行部署先全局安装 CLI再执行部署命令npm i -g vercel vercel数据库连接串等环境变量通过--env传入跳过交互问答用--yes首次部署后默认走预览分支向生产环境发布需追加--prodvercel --env DATABASE_URLTU_URL_DE_BASE_DE_DATOS_AQUI --yes vercel --prod值得一提的是脚手架生成的 tRPC 客户端在getBaseUrl()中专门处理了process.env.VERCEL_URL见 cli/template/extras/src/trpc/react.tsx即部署到 Vercel 后会自动使用 Vercel 分配的域名拼接 API 地址无需手工配置——这是官方推荐 Vercel在代码层面的实际支撑。PlanetScale无后顾之忧的数据库文档称 PlanetScale 是至今用过最好的 serverless 数据库平台扩展能力惊人、开发者体验出色、定价友好并强调如果你用 SQL但愿配合 Prisma这几乎难以被超越。在仓库中PlanetScale 也被列为 CLI 支持的四种数据库提供方之一见 cli/src/installers/index.ts并有配套的 Prisma schema 与 Drizzle schema 模板如 cli/template/extras/src/server/db/db-prisma-planetscale.ts。Railway现代 Heroku托管你的基础设施如果 Vercel 和 PlanetScale 都不够用文档推荐 Railway——把 GitHub 仓库指过去即可是让一台真正的服务器跑起来的最简单方式适合托管更传统/更完整的后端基础设施。Upstash无服务器 RedisPrisma PlanetScale 很好但部分项目需要更高性能的内存方案。Upstash 让你在无服务器项目里获得 Redis 的内存级性能而无需自己管理基础设施与伸缩。Pusher 与 SoketiWebSocket 的两种姿势如果 WebSocket 是项目核心文档建议考虑更传统的后端如 Fastify——它也支持 tRPC。但若只是快速给 T3 App 加上 WebSocketPusher是优秀选择Soketi则是 Pusher 的可自托管、简单快速的开源替代与 Pusher SDK 完全兼容其 serverless 版本仍处于 beta。六、数据分析轻量、隐私友好的替代方案构建应用时用户数据极具价值文档推荐了两款轻量分析方案Plausible获取分析的极快方式之一极简主义还提供针对 Next.js 的简单代理插件Umami开源、可自托管、简单、快速、注重隐私的 Google Analytics 替代品可轻松部署到 Vercel、Railway 等平台并用 PlanetScale 作为其数据库。对追求少收集、重隐私的团队这两款是默认 Google Analytics 之外的务实选择。七、其他用 Next Bundle Analyzer 看清你的打包体积应用编译产物体积往往难以判断文档推荐Next Bundle Analyzernpm 包next/bundle-analyzer来可视化和分析生成的 JavaScript bundles。将其接入构建流程后每次构建都会产出可视化的打包分析报告帮助你定位体积异常、按需加载与代码拆分的改进空间。八、选型自检清单综合全文在为 T3 项目引入第三方依赖前建议按如下顺序自检服务端状态是否已被 tRPC React Query 覆盖脚手架默认配置见 cli/template/extras/src/trpc/query-client.ts客户端状态是否真的超出useState的能力边界再决定 ZustandRedux 风格还是 Jotai原子化风格UI 组件按从零定制Radix UI / Headless UI / React Aria还是开箱即用Chakra UI / Mantine分类规模化后用 CVA 沉淀自有组件库动画按低成本提升 UXAutoAnimate还是精细复杂动效Framer Motion二选一部署与数据Next.js 应用优先考虑 Vercel参考 Vercel 部署指南数据库按需考虑 PlanetScale基础设施托管考虑 Railway高性能缓存考虑 UpstashWebSocket 按自托管与否在 Pusher 与 Soketi 间选择分析优先考虑 Plausible 或 Umami 这类轻量、隐私友好方案最后付费服务务必自行调研参考 cli/src/installers/index.ts 中可安装包与数据库提供方的完整清单确认新库与脚手架现有依赖tRPC、Prisma/Drizzle、Tailwind、NextAuth/Better Auth在版本与职责上不冲突。【免费下载链接】create-t3-appThe best way to start a full-stack, typesafe Next.js app项目地址: https://gitcode.com/gh_mirrors/cr/create-t3-app创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考