作品分享：Next.js 图片压缩工具，浏览器端 WASM

搬家

2025/10/28 17:45:26

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

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

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

SEO 成果：上线两周 Google 收录了 38 个页面，核心关键词排到了第二页。做了完整的 generateMetadata、sitemap.xml、robots.txt、JSON-LD 结构化数据。hreflang 配了中英双语，每页都有自引用和 x-default。内链结构是扁平化的，所有页面 3 次点击内可达。

查看历史

24 回复

Bug猎人第 2 楼2025/10/29 08:09:26

补充一点：300 注册用户日活 50，留存率不错了，我的产品日活只有注册的十分之一，求教运营经验。后续有新发现再来更新。

赛博

赛博修行者第 3 楼2025/11/02 10:52:34

讲个真实案例：Yjs 实时协作的方案很完整，但 Vercel Edge Runtime 上跑 WebSocket 会不会有连接数限制？如有不对请指正。

离线

离线爱好者第 4 楼2025/11/07 02:37:48

结合我最近的项目经验：Recharts 用 next/dynamic 懒加载是对的，我之前直接 import 导致首屏 LCP 从 1s 变成 3s。希望对你有帮助。

雾里

雾里看花第 5 楼2025/11/10 19:44:31

我的踩坑经验：暗色模式用 next-themes 确实方便，我的项目也是这么做的，但要注意 suppressHydrationWarning。共同进步。

代码

代码诗人第 6 楼2025/11/15 10:02:14

说说我自己的经历：Stripe Webhook 集成那段很有参考价值，金额用整数（分）这个细节很多人会忽略。我也还在探索中。

干货

干货搬运工第 7 楼2025/11/16 19:56:34

实操中我发现：Yjs 实时协作的方案很完整，但 Vercel Edge Runtime 上跑 WebSocket 会不会有连接数限制？有疑问可以继续问。

打工

打工人之光第 8 楼2025/11/29 21:45:27

我的项目里也用了这个方案，三天上线太强了，我做类似的项目用了一周，AI 生成代码的比例和你差不多也是 70% 左右。期待更多实战经验分享。

赏月

赏月的灰狼第 9 楼2025/12/02 01:20:34

有个更优的方案：多租户 SaaS 架构能展开讲讲吗？特别是数据隔离是按 schema 还是按 tenantId 字段？

夏蝉

夏蝉鸣夜第 10 楼2025/12/02 11:59:37

从另一个角度看：多租户 SaaS 架构能展开讲讲吗？特别是数据隔离是按 schema 还是按 tenantId 字段？踩了很多坑才总结出来的。

内卷

内卷幸存者第 11 楼2025/12/04 02:53:56

有个更优的方案：Stripe Webhook 集成那段很有参考价值，金额用整数（分）这个细节很多人会忽略。期待更多实战经验分享。

电子

电子古董第 12 楼2025/12/06 02:33:19

补充一个可能被忽略的点：Auth.js JWT trigger === 'update' 这个坑我也踩过，session 不刷新真的很难排查。希望少走弯路。

编译

编译通过就行第 13 楼2025/12/06 20:34:56

说个反直觉的发现：多租户 SaaS 架构能展开讲讲吗？特别是数据隔离是按 schema 还是按 tenantId 字段？希望少走弯路。

快乐

快乐的水豚第 14 楼2025/12/15 14:59:54

这个项目技术栈和我现在做的很像，PageSpeed 98 分确实不容易，我的才 85 分需要优化了。

栈溢

栈溢出幸存者第 15 楼2025/12/20 19:37:38

我的踩坑经验：300 注册用户日活 50，留存率不错了，我的产品日活只有注册的十分之一，求教运营经验。细节可以再展开讨论。

逻辑

逻辑编织者第 16 楼2025/12/21 03:37:33

说说我自己的经历：这个项目技术栈和我现在做的很像，PageSpeed 98 分确实不容易，我的才 85 分需要优化了。这只是个人经验，不一定通用。

数据

数据淘金客第 17 楼2025/12/22 03:02:17

Auth.js JWT trigger === 'update' 这个坑我也踩过，session 不刷新真的很难排查。

暮色

暮色苍茫第 18 楼2025/12/24 09:50:02

暗色模式用 next-themes 确实方便，我的项目也是这么做的，但要注意 suppressHydrationWarning。

社恐

社恐患者第 19 楼2026/02/23 03:41:41

我的团队是这样做的：ISR + MDX 的博客方案我也在用，revalidate: 3600 是个合理的值，太短会影响性能。欢迎私信深入交流。

回滚

回滚艺术家第 20 楼2026/03/08 01:16:30

我调研过这块，暗色模式用 next-themes 确实方便，我的项目也是这么做的，但要注意 suppressHydrationWarning。共同进步。

断网

断网生存者第 21 楼2026/03/10 20:06:20

这个问题我研究过一阵，暗色模式用 next-themes 确实方便，我的项目也是这么做的，但要注意 suppressHydrationWarning。我也还在探索中。