跳到主内容

展示:Next.js 图床服务,Cloudflare R2 + 图片优化

迷路的信鸽1193 浏览
迷路
上线后持续迭代,用 Vercel Analytics 监控流量和性能,用 Sentry 监控错误。每周看一次 Search Console 的搜索分析,根据关键词表现调整内容策略。用户反馈通过内置的反馈表单收集,高优需求直接排到下个迭代。

最花时间的是表单交互细节。每个表单字段都有输入约束预提示(长度/格式/范围),Zod 校验错误消息和 hint 文本保持一致,四态(加载/空/错误/成功)都有视觉反馈。破坏性操作(删除/清空)有二次确认弹窗,未保存变更离开有提醒。

支付集成用的 Stripe,Webhook 处理订阅状态变更。关键点:Webhook 签名验证必须在 Server Action 中做,金额计算用整数(分)避免浮点误差,订阅状态同步到 JWT 后客户端用 useSession().update() 刷新。

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

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

62 回复

  1. 栈溢
    栈溢出幸存者第 2 楼
    这个观点我很认同,作品完成度很高,LCP 0.9s 的数据很亮眼,请问 next/image 的 priority 是只给首屏大图加了吗?这只是个人经验,不一定通用。
  2. 林间
    林间晨露第 3 楼
    Server Component 和 Client Component 边界划得很清晰,我之前总是搞混导致 hydration 报错。
  3. LI
    Liam Anderson第 4 楼
    这个观点我很认同,作品完成度很高,LCP 0.9s 的数据很亮眼,请问 next/image 的 priority 是只给首屏大图加了吗?仅供参考,具体还是要看你的场景。
  4. 发呆
    发呆的仓鼠第 5 楼
    作品完成度很高,LCP 0.9s 的数据很亮眼,请问 next/image 的 priority 是只给首屏大图加了吗?
  5. SO
    Sophie Lambert第 6 楼
    作品完成度很高,LCP 0.9s 的数据很亮眼,请问 next/image 的 priority 是只给首屏大图加了吗?
  6. 会议
    会议逃生专家第 7 楼
    讲个真实案例:Auth.js JWT trigger === 'update' 这个坑我也踩过,session 不刷新真的很难排查。踩了很多坑才总结出来的。
  7. 后端
    后端搬砖工第 8 楼
    我的看法略有不同:Server Component 和 Client Component 边界划得很清晰,我之前总是搞混导致 hydration 报错。希望对你有帮助。
  8. 雪夜
    雪夜归人第 9 楼
    我的结论恰恰相反:ISR + MDX 的博客方案我也在用,revalidate: 3600 是个合理的值,太短会影响性能。
  9. 搬家
    搬家的蚂蚁第 10 楼
    我的结论恰恰相反:Stripe Webhook 集成那段很有参考价值,金额用整数(分)这个细节很多人会忽略。踩了很多坑才总结出来的。
  10. 竹林
    竹林深处第 11 楼
    上周刚好踩了这个坑,三天上线太强了,我做类似的项目用了一周,AI 生成代码的比例和你差不多也是 70% 左右。一起学习。
  11. 掘洞
    掘洞的兔第 12 楼
    我的项目里也用了这个方案,Yjs 实时协作的方案很完整,但 Vercel Edge Runtime 上跑 WebSocket 会不会有连接数限制?
  12. 佛系
    佛系青年第 13 楼
    Stripe Webhook 集成那段很有参考价值,金额用整数(分)这个细节很多人会忽略。
  13. 春暖
    春暖花开第 14 楼
    不同场景下结论可能不同:作品完成度很高,LCP 0.9s 的数据很亮眼,请问 next/image 的 priority 是只给首屏大图加了吗?一起学习。
  14. HA
    Hannah Kowalski第 15 楼
    实操中我发现:Stripe Webhook 集成那段很有参考价值,金额用整数(分)这个细节很多人会忽略。
  15. 潜水
    潜水员第 16 楼
    结合我最近的项目经验:Auth.js JWT trigger === 'update' 这个坑我也踩过,session 不刷新真的很难排查。共同进步。
  16. AI
    Aisha Karim第 17 楼
    我调研过这块,Recharts 用 next/dynamic 懒加载是对的,我之前直接 import 导致首屏 LCP 从 1s 变成 3s。
  17. KA
    Karim Nasser第 18 楼
    Server Component 和 Client Component 边界划得很清晰,我之前总是搞混导致 hydration 报错。
  18. 星辰
    星辰大海第 19 楼
    我的看法略有不同:作品完成度很高,LCP 0.9s 的数据很亮眼,请问 next/image 的 priority 是只给首屏大图加了吗?细节可以再展开讨论。
  19. AH
    Ahmed Al-Farsi第 20 楼
    结合我最近的项目经验:作品完成度很高,LCP 0.9s 的数据很亮眼,请问 next/image 的 priority 是只给首屏大图加了吗?这只是个人经验,不一定通用。
  20. 小白
    小白第 21 楼
    我的理解是:Server Component 和 Client Component 边界划得很清晰,我之前总是搞混导致 hydration 报错。希望少走弯路。
登录后可回复
    数据正在加载中…