🌸 入职写了一个月全栈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 流体'视觉引擎：让粒子表面的颜色不再是静态的，而是像两种粘稠的荧光液体一样，在失重环境下互相吞噬、搅拌、流动，且流速由音乐能量驱动。

• docs.langchain.com/oss/javascr...
• www.modelscope.ai/home
• vercel.com
• www.modelscope.ai/mcp

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协议内部详情
  • github.com/MarkTechSta...
  • github.com/a2aproject/...
  • a2a-protocol.org/latest/topi...
• 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 喝了两瓶酒。这个周末我要重温甜甜的恋爱 给我也来一颗药丸 给时间是时间 让过去过去, 年底想去日本跨年了