来源：https://github.com/datawhalechina/vibe-vibe

本节目标：掌握 Node.js 生态中最常用的库，学会快速找到合适的轮子，把时间花在业务逻辑上。

小明想给应用加个无限滚动功能，打开 Claude Code 说："帮我写一个无限滚动的实现。"

Claude Code 立刻开始写代码。老师傅在旁边看到了，赶紧喊停："等等！你确定要让它写吗？"

小明愣了："AI 能写出来啊，为什么不让它写？"

老师傅说："它确实能写，但那是最低效的方案。如果你用 React，SWR 或 TanStack Query 已经帮你处理好了无限滚动、缓存、重新验证、错误重试、乐观更新……让 AI 写的话，光处理边界情况就得几百行代码，而且没有经过生产验证。用成熟库更靠谱。"

"AI 的价值不是帮你重新发明轮子，"老师傅继续说，"而是帮你找到最合适的轮子，然后教你怎么用。"

一个真实项目遇到的问题和解决方案

在开始之前，先看看一个真实的 Next.js 全栈项目在开发过程中遇到了哪些问题，以及用什么库解决的：

问题 1：用户数据频繁变化，每次都重新 fetch 太慢

遇到的问题：用户列表页面，每次切换回来都要重新加载，体验很差。而且多个组件同时请求同一个接口，浪费带宽。

解决方案：swr - 自动缓存请求结果，多个组件共享同一份数据，还能自动重新验证保证数据新鲜度。

问题 2：表单验证逻辑散落在各处，改一个地方要改好几个文件

遇到的问题：前端验证一遍，后端验证一遍，两边逻辑不一致，经常出 bug。

解决方案：zod - 定义一次 schema，前后端共用，类型安全，改一处全部生效。

问题 3：用户认证要处理 session、cookie、密码加密……太复杂了

遇到的问题：自己写认证系统，光处理安全问题就得几周，还不一定靠谱。

解决方案：better-auth - 开箱即用的认证方案，支持多种登录方式，安全问题都帮你处理好了。

问题 4：数据库查询写 SQL 太繁琐，还容易出错

遇到的问题：手写 SQL 容易拼错，没有类型提示，改表结构要全局搜索修改。

解决方案：drizzle-orm - 类型安全的 ORM，写查询有智能提示，改表结构编译器会报错。

问题 5：用户上传的内容可能包含恶意脚本

遇到的问题：用户输入的 Markdown 或 HTML 可能包含 XSS 攻击代码。

解决方案：sanitize-html + rehype-sanitize - 自动清理危险内容，保留安全的格式。

问题 6：表单状态管理太复杂，每个字段都要写一堆代码

遇到的问题：受控组件写起来很繁琐，验证、错误提示、提交状态……代码量爆炸。

解决方案：react-hook-form - 用 Hook 管理表单，代码量减少 70%，性能还更好。

问题 7：生产环境进程崩溃了没人知道

遇到的问题：Node.js 进程挂了，网站就挂了，还得手动重启。

解决方案：pm2 - 自动重启、负载均衡、日志管理，一个命令搞定。

问题 8：日志输出太慢，影响性能

遇到的问题：console.log 在高并发下会阻塞事件循环。

解决方案：pino - 异步日志，性能是 console.log 的 10 倍以上。

问题 9：拖拽排序功能要处理各种边界情况

遇到的问题：拖拽涉及鼠标事件、触摸事件、动画、碰撞检测……自己写至少几百行。

解决方案：@dnd-kit/core - 专业的拖拽库，可访问性、触摸支持、动画全都有。

问题 10：图片上传前要压缩，否则太大了

遇到的问题：用户上传的照片动辄几 MB，服务器带宽扛不住。

解决方案：browser-image-compression - 浏览器端压缩图片，减少 80% 流量。