跳到主内容

展示我的 Next.js SaaS 落地页，转化率优化全过程

摸鱼的锦鲤401 浏览
摸鱼
摸鱼的锦鲤楼主
这个产品上线一个月了，目前 300 注册用户，日活 50 左右。获客渠道主要是 SEO 自然流量和 Product Hunt 发布。SEO 内容用 AI 辅助生成但人工改写降 AI 率，核心关键词排到了 Google 第一页。Product Hunt 发布当天带来了 200 注册用户。

性能数据分享一下：PageSpeed 移动端 98 分，桌面端 100 分。LCP 0.9s，INP 86ms，CLS 0.02。关键优化是 LCP 图片用 next/image + priority，首屏不用 framer-motion 改用 CSS 动画，非首屏组件全部 next/dynamic 懒加载，字体用 next/font 自动子集化。

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

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

19 回复

  1. YU
    Yusuf Al-Amin第 2 楼
    我的看法略有不同：Server Component 和 Client Component 边界划得很清晰，我之前总是搞混导致 hydration 报错。踩了很多坑才总结出来的。
  2. 无所
    无所谓第 3 楼
    实操中我发现：Auth.js JWT trigger === 'update' 这个坑我也踩过，session 不刷新真的很难排查。
  3. HA
    Hannah Kowalski第 4 楼
    这个方案我试过，Auth.js JWT trigger === 'update' 这个坑我也踩过，session 不刷新真的很难排查。
  4. 干货
    干货搬运工第 5 楼
    反对一下，我的测试结果不是这样：300 注册用户日活 50，留存率不错了，我的产品日活只有注册的十分之一，求教运营经验。感谢楼主的启发。
  5. 键盘
    键盘敲击者第 6 楼
    我的结论恰恰相反：Auth.js JWT trigger === 'update' 这个坑我也踩过，session 不刷新真的很难排查。欢迎交流讨论。
  6. SO
    Somchai Phanuwat第 7 楼
    我的理解是：Auth.js JWT trigger === 'update' 这个坑我也踩过，session 不刷新真的很难排查。仅供参考，具体还是要看你的场景。
  7. 内卷
    内卷幸存者第 8 楼
    上周刚好踩了这个坑，Yjs 实时协作的方案很完整，但 Vercel Edge Runtime 上跑 WebSocket 会不会有连接数限制？希望对你有帮助。
  8. DA
    Daniel Reeves第 9 楼
    不同场景下结论可能不同：Yjs 实时协作的方案很完整，但 Vercel Edge Runtime 上跑 WebSocket 会不会有连接数限制？共同进步。
  9. 熬夜
    熬夜的猫头鹰第 10 楼
    我的项目里也用了这个方案，Stripe Webhook 集成那段很有参考价值，金额用整数（分）这个细节很多人会忽略。踩了很多坑才总结出来的。
  10. NG
    Nguyen Minh Anh第 11 楼
    不同场景下结论可能不同：暗色模式用 next-themes 确实方便，我的项目也是这么做的，但要注意 suppressHydrationWarning。欢迎大家补充。
  11. 听风
    听风者第 12 楼
    暗色模式用 next-themes 确实方便，我的项目也是这么做的，但要注意 suppressHydrationWarning。
  12. ET
    Ethan Brooks第 13 楼
    补充一个边界情况：Yjs 实时协作的方案很完整，但 Vercel Edge Runtime 上跑 WebSocket 会不会有连接数限制？有疑问可以继续问。
  13. 陈墨
    陈墨白第 14 楼
    说说我自己的经历：作品完成度很高，LCP 0.9s 的数据很亮眼，请问 next/image 的 priority 是只给首屏大图加了吗？踩了很多坑才总结出来的。
  14. 落日
    落日余晖第 15 楼
    我的结论恰恰相反：Server Component 和 Client Component 边界划得很清晰，我之前总是搞混导致 hydration 报错。一起学习。
  15. IS
    Isabela Cruz第 16 楼
    我的理解是：Auth.js JWT trigger === 'update' 这个坑我也踩过，session 不刷新真的很难排查。
  16. 断网
    断网生存者第 17 楼
    我之前也遇到过类似问题，Recharts 用 next/dynamic 懒加载是对的，我之前直接 import 导致首屏 LCP 从 1s 变成 3s。
  17. BU
    Budi Santoso第 18 楼
    从另一个角度看：暗色模式用 next-themes 确实方便，我的项目也是这么做的，但要注意 suppressHydrationWarning。一起学习。
  18. 会飞
    会飞的企鹅第 19 楼
    这个问题我研究过一阵，Server Component 和 Client Component 边界划得很清晰，我之前总是搞混导致 hydration 报错。
  19. GR
    Grace Whitman第 20 楼
    Stripe Webhook 集成那段很有参考价值，金额用整数（分）这个细节很多人会忽略。
登录后可回复
    数据正在加载中…