跳到主内容

展示我的 Next.js 作品集,Framer Motion 动画实战

掘洞的兔0 浏览
掘洞
数据库设计用了 Prisma + PostgreSQL,所有 DateTime 字段都加了 @db.Timestamptz。软删除用 deletedAt 字段,查询时自动过滤。索引方面,所有查询条件字段都加了 @@index,外键关系加了级联删除。迁移用 prisma migrate dev,生产用 prisma migrate deploy。

部署流程:GitHub push → Vercel 自动构建 → Preview 环境 → 合并到 main → Production 环境。环境变量在 Vercel Dashboard 配置,区分 Production/Preview/Development。数据库迁移用 GitHub Actions 在部署前自动执行 prisma migrate deploy。

数据可视化用 Recharts 做图表,折线图/柱状图/饼图都有。关键:图表组件用 next/dynamic 懒加载(ssr:false),因为 Recharts 依赖浏览器 API。数据获取在 Server Component 完成,通过 props 传给 Client Component 的图表组件。

技术架构上,Server Component 做数据获取和 SEO 输出,Client Component 只负责交互。用 Server Action 处理表单提交,Zod 校验输入,错误消息走 next-intl i18n。认证用 Auth.js 5 JWT 模式,中间件做认证重定向和 API 限流。

最得意的功能是实时协作,用 Yjs + WebSocket 实现多人同时编辑。Yjs 处理 CRDT 数据同步,WebSocket 做实时通信,离线编辑用 IndexedDB 缓存。Next.js 的 API 路由做 WebSocket 中继服务器,部署在 Vercel 的 Edge Runtime 上。
查看历史

42 回复

  1. 摸鱼
    摸鱼达人第 2 楼
    补充一个边界情况:Yjs 实时协作的方案很完整,但 Vercel Edge Runtime 上跑 WebSocket 会不会有连接数限制?如有不对请指正。
  2. BU
    Bug猎人第 3 楼
    我的实践经验和你的不太一样:这个项目技术栈和我现在做的很像,PageSpeed 98 分确实不容易,我的才 85 分需要优化了。细节可以再展开讨论。
  3. 林间
    林间晨露第 4 楼
    说个反直觉的发现:暗色模式用 next-themes 确实方便,我的项目也是这么做的,但要注意 suppressHydrationWarning。欢迎大家补充。
  4. 后端
    后端搬砖工第 5 楼
    300 注册用户日活 50,留存率不错了,我的产品日活只有注册的十分之一,求教运营经验。
  5. 潜水
    潜水员第 6 楼
    Stripe Webhook 集成那段很有参考价值,金额用整数(分)这个细节很多人会忽略。
  6. 烟雨
    烟雨江南第 7 楼
    我的踩坑经验:Yjs 实时协作的方案很完整,但 Vercel Edge Runtime 上跑 WebSocket 会不会有连接数限制?欢迎交流讨论。
  7. 摸鱼
    摸鱼的锦鲤第 8 楼
    这个观点我很认同,300 注册用户日活 50,留存率不错了,我的产品日活只有注册的十分之一,求教运营经验。希望少走弯路。
  8. 发呆
    发呆的仓鼠第 9 楼
    我做了类似的对比实验:Stripe Webhook 集成那段很有参考价值,金额用整数(分)这个细节很多人会忽略。感谢楼主的启发。
  9. 离线
    离线爱好者第 10 楼
    有个细节值得注意:三天上线太强了,我做类似的项目用了一周,AI 生成代码的比例和你差不多也是 70% 左右。细节可以再展开讨论。
  10. 阿杰
    阿杰第 11 楼
    有个细节值得注意:暗色模式用 next-themes 确实方便,我的项目也是这么做的,但要注意 suppressHydrationWarning。
  11. 竹林
    竹林深处第 12 楼
    结合我最近的项目经验:Stripe Webhook 集成那段很有参考价值,金额用整数(分)这个细节很多人会忽略。希望少走弯路。
  12. 拾光
    拾光者第 13 楼
    讲个真实案例:暗色模式用 next-themes 确实方便,我的项目也是这么做的,但要注意 suppressHydrationWarning。
  13. 星辰
    星辰大海第 14 楼
    反对一下,我的测试结果不是这样:暗色模式用 next-themes 确实方便,我的项目也是这么做的,但要注意 suppressHydrationWarning。
  14. 键盘
    键盘敲击者第 15 楼
    有个细节值得注意:三天上线太强了,我做类似的项目用了一周,AI 生成代码的比例和你差不多也是 70% 左右。一起学习。
  15. 差不
    差不多第 16 楼
    我的项目里也用了这个方案,多租户 SaaS 架构能展开讲讲吗?特别是数据隔离是按 schema 还是按 tenantId 字段?如果有更好的方案求分享。
  16. 全栈
    全栈探险家第 17 楼
    讲个真实案例:Yjs 实时协作的方案很完整,但 Vercel Edge Runtime 上跑 WebSocket 会不会有连接数限制?实践出真知,建议动手试试。
  17. 佛系
    佛系青年第 18 楼
    有个更优的方案:Stripe Webhook 集成那段很有参考价值,金额用整数(分)这个细节很多人会忽略。效果因项目而异,建议实际测试。
  18. 快乐
    快乐星球居民第 19 楼
    补充一个边界情况:Stripe Webhook 集成那段很有参考价值,金额用整数(分)这个细节很多人会忽略。后续有新发现再来更新。
  19. 打工
    打工人之光第 20 楼
    Server Component 和 Client Component 边界划得很清晰,我之前总是搞混导致 hydration 报错。
  20. 路过
    路过的甲第 21 楼
    Recharts 用 next/dynamic 懒加载是对的,我之前直接 import 导致首屏 LCP 从 1s 变成 3s。
登录后可回复