🌸 入职写了一个月全栈next.js 感想

背景介绍

最近组内要做0-1的新ai产品, 招我进来就是负责这个ai产品,启动的时候这个季度就剩下两个月了,天天开会对齐进度,一个月就已经把基础版本给做完了,想要接入到现有的业务上面,时间方面就特别紧张,技术选型怎么说呢, leader用ai写了一个版本我们在现有的代码进行二次开发这样, 全栈next.js 要学习的东西太多了又没有前端基础,没有ai coding很难完成任务(十几分钟干完我一天的工作 claude4.5效果还不错进度推的特别快), 自从trae下架了claude,后面就一直cursor claude 4.5了。
- nextjs+ts+tailwindcss+shadcn ui现在是mvp套餐，startup在梭哈，时间就是生产力哪需要那么多差异化样式直接一把，有的💰才开始做细节，你会发现慢慢也💩化了。
- Nextjs 是全栈框架可以很快把一个MVP从零到一完整跑起来。你要是抬杠说什么高并发负载均衡啥的，你的用户数量真多到需要考虑性能的时候，你已经不需要自己考虑了(小红书看到的一段话挺符合场景的)
- next.js 写后端确实比较轻量只能做一些curd的操作 socket之类的不太合适其他api 还是随便开发给我的感受就是前端能够直接操作db，前后端仓库可以不分离，业务逻辑还是一定要分离的看看开源的next.js 项目的架构设计结构是怎么样的学习/模仿/改造。
- 语言只是工具，适合最重要，技术没有银弹
nextjs.org/ github.com/vercel/next...

项目的时间线

项目从启动到这周大概是5周的时间

10/28-10/31 Week 1
- 项目初始化/需求讨论/设计文档/
- 后端next.js, typescript技术熟悉项目运行/调试
- 基础框架搭建设计表结构ddl, 集成mysql, 编写crud接口阶段
11/03-11/07 Week 2
- 产品PRD 提供
- xxxx等表设计
11/10-11/14 Week 3
- xxxxx 基本功能完结
- @xxxx 讲解项目结构/规范
11/17-11/21 Week 4
- 首页样式/逻辑优化
- 集成统一登录调研
- 部署完成
11/24-11/28 Week 5
- 服务推理使用Authorization鉴权对内接口使用Cookies (access_token) 鉴权开发
- xxxx 表设计表设计逻辑开发
- xxx设计设计开发
- 联调xxxx

5周时间功能基本完成了剩下的就是部署到线上进行场景实践了

前端技术栈

Next.js 14：选择 App Router 架构，支持服务端渲染和 API Routes
TypeScript 5.4：强类型语言提升代码质量和可维护性
React 18：利用并发特性和 Suspense 提升用户体验
Zustand：轻量级状态管理，替代 Redux 降低复杂度
Ant Design + Radix UI：组件库组合，平衡美观性和可访问性

React + TypeScript react.dev/

优势：类型安全：TypeScript 提供编译时类型检查，减少运行时错误 ✅ 组件化开发 ：高度可复用的组件设计 ✅ 生态成熟 ：丰富的第三方库和工具链 ✅ 开发体验：优秀的 IDE 支持和调试工具
劣势： ❌ 学习曲线 ：TypeScript 对新手有一定门槛 ❌ 编译时间 ：大型项目编译可能较慢 ❌ 配置复杂：类型定义需要额外维护

UI 组件方案 Ant Design + Radix UI 混合方案

优势： ✅ 快速开发 ：Ant Design 提供完整的企业级组件 ✅ 无障碍性 ：Radix UI 提供符合 WAI-ARIA 标准的组件 ✅ 定制灵活 ：Radix UI 无样式组件便于自定义 ✅ 中文支持：Ant Design 对中文界面友好
劣势： ❌ 包体积大 ：两个 UI 库增加了打包体积 ❌ 样式冲突 ：需要注意两个库的样式隔离❌ 维护成本：需要同时维护两套组件系统

Tailwind CSS

优势： ✅ 开发效率高 ：原子化类名，快速构建 UI ✅ 体积优化 ：生产环境自动清除未使用的样式 ✅ 一致性 ：设计系统内置，确保视觉一致 ✅ 响应式：便捷的响应式设计工具
劣势： ❌ 类名冗长 ：HTML 可能变得难以阅读 ❌ 学习成本 ：需要记忆大量类名 ❌ 非语义化：类名不直观反映元素意义

ant design x

ahooks

后端技术栈

Prisma 6.18：现代化 ORM，类型安全且支持 Migration
MySQL：成熟的关系型数据库，满足复杂查询需求
Redis (ioredis) ：高性能缓存，支持多种数据结构
Winston：企业级日志系统，支持日志轮转和结构化输出
Zod：运行时类型验证，保障 API 数据安全

Next.js API Routes

优势： ✅ 统一代码库 ：前后端在同一项目中 ✅ 类型共享 ：TypeScript 类型可在前后端复用 ✅ 开发效率 ：无需配置跨域、代理等 ✅ 部署简单：单一应用部署
劣势： ❌ 扩展性限制 ：无法独立扩展后端服务 ❌ 性能瓶颈 ：Node.js 单线程可能成为瓶颈 ❌ 微服务困难：不适合复杂的微服务架构

Prisma ORM

优势： ✅ 类型安全 ：自动生成 TypeScript 类型 ✅ 迁移管理 ：声明式 schema，易于版本控制 ✅ 查询性能 ：生成优化的 SQL 查询 ✅ 关系处理 ：直观的关系查询 API ✅ 多数据库支持：支持 MySQL、PostgreSQL、SQLite 等
劣势： ❌ 复杂查询 ：某些复杂 SQL 可能需要原始查询 ❌ 生成代码体积 ：生成的 client 文件较大 ❌ 版本升级：大版本升级可能需要迁移

踩坑记录

主要是记录一些开发过程中踩坑和设计问题

node js 项目 jean部署
自定义配置/dockerfile配置没有类似项目参考健康检查问题加上环境变量配置多环境一步一步
next.js 中用middleware进行接口拦截鉴权里面有prisma path import 直接出现了Edge Runtime 异常自定义auth 解决
npm build 项目踩坑
静态渲染流程动态api 警告强制动态渲染
其他组件 document 不支持build问题
保存多场景模式+构建版本管理第一版考虑的太少了，发现有问题后面又重构了一版本
xxx日志目前还没有接入要不就是日志文件要不就是console.log 目前看日志的方式是去容器化运行日志看了后续集群部署就比较麻烦了
ant design 版本降低到6.0以下 ant-design x 用不了2.0.0 的一些对话组件

Next.js实践的项目记录

苏州 trae friends线下黑客松 📒

去Trae pro-Solo模式苏州线下hackathon一趟, 基本都是一些独立开发者，一人一公司，三个小时做出一个产品用Trae-solo coder模式，不得不说trae内部集成的vercel部署很丝滑 react项目一键deploy访问完全不用关系域名服务器, solo模式其实就是混合多种model使用进行输出想要的效果还是得不断的调试 thiking太长，对于前后端分离项目也能够同时关联进行思考规划。
1点多到4点 coding时间从0-1生成项目使用trae pro solo模式就3个小时做不了什么大的东西那就做个日语50音的网站呗现场酒店的网基本用不了我数据也很卡用的旁边干中学老师的热点用next.js tailwindcss ant design deepseek搭建的网页够用了最后vercel部署 trae自带集成挺方便的 solo模式还是太慢了接受不了网站地址是 traekanastudio1ssw.vercel.app/ 功能就是假名+ai生成例句和单词我都没有路演最后拿优秀奖可能是我部署了吧大部分人没部署优秀奖就是卫衣了蹭了一天的饭加零食爽吃
www.xiaohongshu.com/explore/692... 小红书当时发的帖子可以领奖品

Typescript的AI方向 langchain/langgraph支持ts

最近在看的ts的ai框架发现langchain 是支持ts的, langchain-chat 主要是使用langchain+langgraph 对ts进行实践 traechat-apps4y6.vercel.app/
部署还踩坑了 MCP 在 Vercel 上不生效是因为 Vercel 是 serverless 环境，不支持运行持久的子进程。让我帮你解决这个问题：
主要是对最近项目组内要用的到mcp/function call 进行实践操作使用modelscope 上面开源的mcp进行尝试使用vercel进行部署。
最近看到小红书上面的3d 粒子圣诞树有点火呀，自己也尝试下效果很差自己弄的提示词可以去看看帖子上的提示词去试试他们都是gemini pro 3玩的我也去弄个gemini pro 3 账号去玩玩。
还有一个3d粒子跟着音乐动的的效果下面的提示词可以试试

帮我构建一个极简科幻风格的 3D 音乐可视化网页。
视觉上参考 SpaceX 的冷峻美学，全黑背景，去装饰化。核心是一个由数千个悬浮粒子组成的'生命体'，它必须能与声音建立物理连接：低音要像心脏搏动一样冲击屏幕，高音要像电流一样瞬间穿过点阵。
重点实现一种'ACID 流体'视觉引擎：让粒子表面的颜色不再是静态的，而是像两种粘稠的荧光液体一样，在失重环境下互相吞噬、搅拌、流动，且流速由音乐能量驱动。

ai方向总结

a2a解决的是agent之间如何配合工作的问题 agent card定义名片名称版本能力语言格式 task委托书通信方式http 用户客户端是主控接受用户需求制定具体任务向服务器发出需求任务分发接受响应服务器是各类部署好的agent 遵循一套结构化模式
mcp 解决的llm自主调用功能和工具问题
mcp 是解决 function call 协议的碎片化问题，多 agent 主要是为了做上下文隔离
比如说手机有一个system agent 然后各个app有一个agent，用户语音输入买咖啡，然后system agent调用瑞幸agent 这样就是非侵入式让app暴露系统a2a接口，感觉比mcp要更合理一点，不是单纯让app暴露tools，系统agent只需要做路由
而且有一点我觉得挺有意思的，就是自己的agent花的token是自己的钱，如果自己的agent找别人的agent，让它执行任务啥的，花的不就是别人的钱......
Dify：更像宜家的模块化家具，提供可视化工作流、预置模板，甚至支持"拖拽式"编排AI能力。比如，你想做一个智能客服，只需在界面里连接对话模型、知识库和反馈按钮，无需写一行代码

python 和ts 在ai上面的比较

Python 依然是 AI 训练和科研的王者，PyTorch、TensorFlow、scikit-learn 这些生态太厚实了，训练大模型你离不开它。
TS 在底层 AI 能力上还没那么能打，GPU 加速、模型优化这些，暂时还得靠 Python 打底。
Python 搞理论和模型，TypeScript卷体验和交付

个人学习记录

主要还是前端和ai方面的知识点学习的比较多吧

Typescript 语法基础+进阶 / Next.js 开发指南/React 开发指南
ahooks 组件使用 ahooks.js.org/zh-CN/hooks...
ant design x 使用 ant-design-x.antgroup.com/components/...
prisma orm框架 +mysql github.com/prisma/pris...
dotenv 读取配置文件 github.com/dotenvx/dot...
fastmcp 项目构建使用原理
Agent2Agent google协议内部详情
swagger.io/specificati... OpenAPI 规范一个 OpenAPI 描述（OAD）可以由一个 JSON 或 YAML 文档组成
github.com/yossi-lee/s... 根据Swagger3规范，一键将Web服务转换为MCP
www.jsonrpc.org/specificati... JSON-RPC 是一种无状态、轻量级的远程过程调用（RPC）协议
github.com/agno-agi/ag... 多智能体框架
roadmap.sh/ai-engineer ai工程师的roadmap 很全
github.com/ChromeDevTo... *可以集成到cursorz中 *AI 能够直接控制和调试真实的 Chrome 浏览器
www.nano-banana.ai/ Nano Banana Pro (V2) 文生图图生图
aistudio.google.com/prompts/new... gemini ai studio

Vibe Coding

先叠甲, 我没有前端的开发经验，第一次写前端项目，项目里面90%的前端代码都是ai 生成的，能够让你一个不会前端的同学也快速完成mvp版本/需求任务。我虽然很推ai coding 很喜欢用, 即时反馈带来的成就感, 但是对于生成的代码是不是屎山大概率可能是了, 因为前期 AI速度快，制造屎山的速度更快。无论架构设计多优秀，也难避免屎山代码的宿命: 需求一直在变，你的架构设计是针对老的需求，随着新的需求增加，老的架构慢慢的就无法满足了，需要重构。
一起开发的前端同事都说ai生成那些样式互相影响了,样式有tailwindcss 有自定义的css 每个模块又有不同大概率出问题有冲突，就是💩山。
最大的开发障碍就是内心的偏见不愿意放弃现在所擅长的东西带着这份偏见不愿意去学习

对于ai coding 的话用过trae-pro/cursor/qoder/copilot/codex等等最终还是cursor claude 4.5用的最舒服

基本一周一个cursor pro账号买号都花了快1k了。

You have used up your included usage and are on pay-as-you-go which is charged based on model API rates. You have spent $0.00 in on-demand usage this month.

最后就是需要学好英语前端的技术文档都是英文的虽然有中文的翻译版本, 但没有自己直接去看官方的强难免有差异，我现在都是用插件进行web翻译去看的很累。
现在时间是凌晨 11/30/02:36 喝了两瓶酒。这个周末我要重温甜甜的恋爱给我也来一颗药丸给时间是时间让过去过去, 年底想去日本跨年了