浅谈个人技术栈

概览

最近在捣鼓各种项目的时候，发现自己用的技术栈已经慢慢形成了一套体系。作为一个在前端领域摸爬滚打的开发者，现在越来越觉得"全栈"才是未来的方向——毕竟能自己把整个产品从头到尾搞定，这种感觉还是挺爽的。

说实话，虽然可以把技术栈列成一个清单，但实际学习过程完全不是这样的。很多时候你在学 A 的时候突然发现需要用到 B，然后顺带着又把 C 也学了。所以我觉得把这些工具按功能分个类会更好理解一些，下面就来聊聊我常用的这些工具。

我的工具箱

在前端框架这块，Next.js 是我的主力框架，配合 TailwindCSS 做样式，用 ShadcnUI 搭建组件。偶尔需要做移动端的时候，Expo 就派上用场了。数据库方面我一直在用 PostgreSQL，通过 Drizzle ORM 来操作，需要缓存的时候就用 Upstash 的 Redis 服务。部署方面，Vercel 对 Next.js 项目来说是最顺手的选择，而 Supabase 让我能快速搭建起整个后端服务。

用户认证这块，Better Auth 帮我解决了大部分问题。如果项目需要做海外市场，Stripe 是支付集成的不二之选。在数据获取和状态管理上，我会根据场景选择 SWR 或 tRPC，复杂的状态逻辑就交给 Zustand 处理。

至于工具链，Zod 负责数据验证，Orama 提供全文搜索能力，Biome 则接管了代码格式化和 Lint。最近做 AI 相关的功能，Vercel AI SDK 也成了标配工具。

Next.js

说到 Next.js，这应该算是我接触最多的框架了。它是 Vercel 团队开源的 React 框架，现在很多大厂都在用，像 OpenAI 和 Claude 的网站都是用它做的。

刚开始学的时候我还挺担心会不会很难上手，结果发现官方的入门教程写得真的很友好，跟着做下来基本就能把整个框架的思路搞清楚了。而且官方还开源了一大堆示例项目，遇到问题基本都能找到参考。

现在 Next.js 已经出到 16 版本了，完美支持 React 19.2 的新特性。每次更新都能感受到框架在不断进化，用起来确实越来越顺手。

Tailwind CSS

用过 Bootstrap 的同学应该知道，传统 CSS 框架都是给你一堆预设好的组件样式。Tailwind CSS 完全反其道而行之，它提供的是一堆原子化的工具类，你可以像搭积木一样自己组合出想要的样式。

刚开始我也觉得这种写法有点奇怪，HTML 里一堆 class 看着挺乱的。但用了一段时间后发现真香——再也不用在 HTML 和 CSS 文件之间来回切换了，想改样式直接改 class 就行，效率提升明显。而且配置文件可以完全自定义设计系统，打包后的 CSS 文件还特别小，因为会自动删掉没用的样式。

强烈建议装个 Tailwind CSS IntelliSense 插件，有了智能提示后开发效率直接起飞。

ShadcnUI

这个组件库比较特别，它不是通过 npm install 安装的，而是直接把组件代码复制到你的项目里。一开始我觉得这不是倒退了吗？后来才发现这样做的好处可太多了——代码在你自己项目里，想怎么改就怎么改，也不用担心组件库更新导致的兼容性问题。最重要的是，你只添加需要的组件，不会有多余的依赖。而且它基于 Radix UI 构建，无障碍访问做得很好，TypeScript 支持也很完善。

现在做项目基本都会用到 ShadcnUI，确实省了不少写 UI 的时间。

Drizzle + PostgreSQL

在选 ORM 的时候我纠结了挺久，Prisma 很火，但我最后还是选了 Drizzle。最吸引我的是它写起来更像在写 SQL，学习成本比较低。而且 TypeScript 类型推导做得特别好，写查询的时候智能提示很准确。性能方面也不错，生成的 SQL 很干净，还支持直接写原生 SQL，灵活度很高。数据库迁移也很方便，基本不用操心。

PostgreSQL 就不用多说了，开源界的数据库扛把子。功能强大、性能稳定，支持 JSON、全文搜索这些高级特性，无论是个人项目还是企业应用都很合适。

Supabase

Supabase 简单来说就是开源版的 Firebase。它底层用的是 PostgreSQL，在这基础上提供了一整套后端服务。我特别喜欢它能直接基于数据库表自动生成 RESTful API，省去了写接口的时间。实时订阅功能也很好用，做个聊天室之类的特别方便。另外它还自带文件存储和 CDN，提供 Edge Functions 可以写一些服务端逻辑。最关键的是免费额度对个人项目来说完全够用。

对于想快速做出一个全栈应用的开发者来说，Supabase 真的是神器级别的工具。

Better Auth

说到用户认证，以前我都是自己写，后来发现这个轮子不用重复造。Better Auth 是个挺新的认证库，但设计得很现代化。它支持邮箱密码、OAuth、魔法链接等各种登录方式，TypeScript 支持很完善，类型提示很到位。更重要的是它不绑定特定框架，在哪都能用，会话管理也做得很安全。

有了它，我现在做项目的登录注册功能基本半小时就能搞定，可以把精力放在真正重要的业务逻辑上。

Zod

Zod 是我现在每个项目都会用到的库。它主要用来做数据验证，但不仅仅是验证这么简单。最爽的是可以从 schema 自动推导出 TypeScript 类型，不用手写两遍了。API 设计得很优雅，链式调用写起来很舒服，报错信息也很详细，调试的时候能快速定位问题。而且它是零依赖的，包体积很小。

在全栈项目里，我会用 Zod 定义数据结构，然后前后端共用同一份 schema。这样就能保证前后端的数据格式完全一致，大大减少了因为类型不匹配导致的 bug。

Vercel

部署平台我用过不少，但 Vercel 对于前端项目来说确实是最舒服的。连上 GitHub 仓库后就不用管了，每次 push 自动部署。而且全球 CDN 加速，访问速度很快。每个 PR 都会生成一个预览链接，和团队协作特别方便。它还自带性能监控和分析，支持 Edge Functions，可以在边缘节点跑一些服务端代码。

对于 Next.js 项目来说，Vercel 就是亲儿子待遇。免费套餐对于个人项目和小型团队来说完全够用。

Stripe

虽然在国内用 Stripe 有些限制，但如果你的产品面向海外市场，Stripe 绝对是首选的支付方案。它的 API 设计得特别优雅，文档写得清楚明白，支持各种支付方式，包括信用卡、支付宝、微信支付等。订阅支付的功能很完善，做 SaaS 产品很方便。还有 AI 驱动的欺诈检测，安全性很有保障。测试模式做得也很好，开发阶段不用担心真的扣钱。Webhook 功能强大，可以监听各种支付事件。

集成 Stripe 的过程还挺顺利的，照着官方文档做基本不会踩坑。

Upstash

Upstash 提供的是 Serverless 版本的 Redis 和 Kafka。对于现在流行的 Serverless 架构来说特别合适。我主要用它来缓存一些经常访问的数据、做 API 限流防止被刷、存储用户会话，以及处理一些简单的消息队列。最爽的是按使用量计费，不用的时候完全不花钱。而且有免费额度，小项目基本不用付费。它还提供 REST API，在 Edge Functions 里调用特别方便。

SWR

SWR 是 Vercel 团队做的数据请求库，名字来自 HTTP 缓存策略 stale-while-revalidate。用了它之后基本不用自己管理数据请求的状态了。它会先显示缓存的数据（快），然后在后台重新请求（准），体验特别好。相同的请求会自动合并，不会重复发。还支持自动重新验证，数据能保持最新。分页和无限滚动的支持很完善，TypeScript 类型也很好。

和 Next.js 配合使用简直完美，现在做项目基本不考虑其他数据请求方案了。

tRPC

tRPC 让我体验到了什么叫真正的端到端类型安全。不需要任何代码生成，前端就能自动获得后端 API 的完整类型。在前端调用后端 API 时，IDE 会给出完整的类型提示和自动补全。后端改了 API，前端立刻就会报类型错误，不用等到运行时才发现。重构的时候特别放心，改完一个地方所有相关的地方都会提示。而且几乎是零运行时开销。

对于全栈 TypeScript 项目，tRPC 真的能大幅提升开发效率和代码质量。

Zustand

状态管理我用过 Redux、Mobx，现在更喜欢 Zustand。它特别简单，几行代码就能搞定。API 超级简洁，不需要写一堆 boilerplate 代码，也不需要 Provider 包裹，想在哪用就在哪用。性能很好，基于 hooks，更新很精确。还可以用 Redux DevTools 调试，体积也小，才 1KB 多点。

对于中小型项目的状态管理来说，Zustand 完全够用了。大项目的话也可以和其他方案混用。

Orama

Orama 是一个全文搜索引擎，特别的是它完全运行在浏览器或 Node.js 里，不需要外部服务。给博客或文档网站加搜索功能、做离线应用的搜索，或者需要快速搜索但数据量不是特别大的场景，都很合适。它支持模糊搜索、同义词、中文分词这些功能，搜索速度是毫秒级的。对于个人项目来说，不用自己搭 Elasticsearch 这些重量级方案了。

Biome

Biome 是用 Rust 写的代码格式化和 lint 工具，目标是取代 ESLint + Prettier 这套组合。最大的优势就是快，比 ESLint + Prettier 快 25 倍以上。而且开箱即用，默认配置就很合理，格式化和 lint 集成在一起，不用装两个工具。还支持从现有配置迁移，上手成本很低。

对于大项目来说，每次保存文件都能感受到明显的速度提升。虽然功能上还在完善，但已经可以在实际项目中使用了。

Vercel AI SDK

做 AI 应用的时候发现这个库特别好用。它帮你处理了和 AI 模型交互的各种细节，比如流式输出 AI 生成的内容，体验更好。支持各种模型，OpenAI、Anthropic、Claude 等都能用。还提供了 React Hooks，在组件里用很方便，可以在 Edge Runtime 里跑，响应更快。

现在做 AI 功能基本都会用到它，能省很多事。

Expo

虽然我主要做 Web 开发，但偶尔也需要做移动端。Expo 让我这个前端开发者也能快速上手移动应用开发。热重载开发体验特别好，提供了大量 Native API，比如相机、定位、推送等。可以 OTA 更新，不用每次都走应用商店审核。云构建服务很方便，不用自己配置构建环境。同一份代码还可以跑 Web，一鱼三吃。

对于全栈开发者来说，Expo 大大降低了移动端开发的门槛。

写在最后

以上就是我现在常用的技术栈。每个工具都是在实际项目中慢慢积累下来的，有些是踩过坑后才发现的好东西。

技术栈的选择没有绝对的对错，关键是要适合你的项目和团队。不要盲目追新，稳定性很重要。可以多看看大厂的技术选型，他们踩过的坑能帮你避免很多问题。深入理解底层原理比熟练使用工具更重要，而且要保持学习的态度，因为技术在不断演进。

希望这篇分享对你有帮助。如果你有更好的工具推荐，欢迎交流！