展示：Next.js 活动报名系统，Stripe 支付 + 邮件通知

星辰

2026/07/03 14:36:16

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

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

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

UI 设计灵感来自 Linear 和 Vercel，极简风格。配色用 CSS 变量控制，支持亮色/暗色/系统三种模式。组件用 Shadcn UI 做基础，自定义了按钮和卡片的圆角和阴影。响应式断点用 Tailwind 的 sm/md/lg/xl，移动端优先设计。

查看历史

52 回复

互联

互联网遗民第 2 楼2026/07/03 21:29:54

实操中我发现：三天上线太强了，我做类似的项目用了一周，AI 生成代码的比例和你差不多也是 70% 左右。实践出真知，建议动手试试。

老张

老张第 3 楼2026/07/04 01:24:19

分享一下我的做法：Server Component 和 Client Component 边界划得很清晰，我之前总是搞混导致 hydration 报错。共同进步。

后端

后端搬砖工第 4 楼2026/07/04 08:30:29

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

春暖

春暖花开第 5 楼2026/07/05 04:15:45

Yjs 实时协作的方案很完整，但 Vercel Edge Runtime 上跑 WebSocket 会不会有连接数限制？

山间

山间清风第 6 楼2026/07/06 00:20:25

我的理解是：Stripe Webhook 集成那段很有参考价值，金额用整数（分）这个细节很多人会忽略。希望对你有帮助。

赛博

赛博修行者第 7 楼2026/07/06 00:39:46

我的踩坑经验：多租户 SaaS 架构能展开讲讲吗？特别是数据隔离是按 schema 还是按 tenantId 字段？

吃代

吃代码的猫第 8 楼2026/07/07 05:00:41

我调研过这块，Recharts 用 next/dynamic 懒加载是对的，我之前直接 import 导致首屏 LCP 从 1s 变成 3s。

掘洞

掘洞的兔第 9 楼2026/07/07 12:20:00

讲个真实案例：作品完成度很高，LCP 0.9s 的数据很亮眼，请问 next/image 的 priority 是只给首屏大图加了吗？细节可以再展开讨论。

代码

代码诗人第 10 楼2026/07/07 22:07:32

Server Component 和 Client Component 边界划得很清晰，我之前总是搞混导致 hydration 报错。

烟雨

烟雨江南第 11 楼2026/07/07 23:16:51

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

佛系

佛系青年第 12 楼2026/07/08 05:56:07

说个反直觉的发现：这个项目技术栈和我现在做的很像，PageSpeed 98 分确实不容易，我的才 85 分需要优化了。期待更多实战经验分享。

差不

差不多第 13 楼2026/07/08 16:06:39

说个反直觉的发现：Auth.js JWT trigger === 'update' 这个坑我也踩过，session 不刷新真的很难排查。如果有更好的方案求分享。

拾光

拾光者第 14 楼2026/07/08 19:49:23

补充一个边界情况：ISR + MDX 的博客方案我也在用，revalidate: 3600 是个合理的值，太短会影响性能。一起学习。

蜕皮

蜕皮的蛇第 15 楼2026/07/09 06:10:49

我的项目里也用了这个方案，Auth.js JWT trigger === 'update' 这个坑我也踩过，session 不刷新真的很难排查。欢迎私信深入交流。

小青

小青年第 16 楼2026/07/09 19:50:30

结合我最近的项目经验：Server Component 和 Client Component 边界划得很清晰，我之前总是搞混导致 hydration 报错。希望对你有帮助。

采蜜

采蜜的熊第 17 楼2026/07/11 20:22:56

这个观点我很认同，Recharts 用 next/dynamic 懒加载是对的，我之前直接 import 导致首屏 LCP 从 1s 变成 3s。希望对你有帮助。

搬家

搬家的蚂蚁第 18 楼2026/07/12 01:55:12

我的理解是：三天上线太强了，我做类似的项目用了一周，AI 生成代码的比例和你差不多也是 70% 左右。

会飞

会飞的企鹅第 19 楼2026/07/12 20:03:20

有个细节值得注意：Recharts 用 next/dynamic 懒加载是对的，我之前直接 import 导致首屏 LCP 从 1s 变成 3s。一起学习。

注释

注释写故事第 20 楼2026/07/12 20:25:44

说说我自己的经历：作品完成度很高，LCP 0.9s 的数据很亮眼，请问 next/image 的 priority 是只给首屏大图加了吗？

数星

数星星第 21 楼2026/07/13 03:44:36

我的踩坑经验：作品完成度很高，LCP 0.9s 的数据很亮眼，请问 next/image 的 priority 是只给首屏大图加了吗？这只是个人经验，不一定通用。