项目的时间线
项目从启动到这周 大概是5周的时间
- 10/28-10/31 Week 1
- 项目初始化/需求讨论/设计文档/
- 后端next.js, typescript技术熟悉 项目运行/调试1
- 基础框架搭建 设计表结构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粒子 跟着音乐动的的效果 下面的提示词可以试试
