作品展示

这个项目我用 Next.js 15 App Router 做的，技术栈是 Tailwind v4 + Prisma + Auth.js + Vercel Postgres。前端用 Shadcn UI 做组件，Framer Motion 做交互动画。部署在 Vercel 上，冷启动几乎无感知。整个项目...

具体步骤： 1. 先跑通最小闭环； 2. 再逐步替换流程节点； 3. 每一步都留回退方案。别一上来就全量替换，出问题很难定位。 踩过的坑主要是配置层面。文档写得比较理想化，实际跑起来至少有两处和预期不一致，查 issue 才找到解法，后面附上具体配置。

踩过的坑主要是配置层面。文档写得比较理想化，实际跑起来至少有两处和预期不一致，查 issue 才找到解法，后面附上具体配置。 最近在实际项目里反复验证了这套做法，今天抽空整理出来。先说结论：{kw}这件事，方法论比工具选择更重要，工具只是放大器。 效果数据方面，同样的任务量，整体耗时大概降了三成，返工率也明显下降。当然样本有限，仅供参考。

背景是这样的：手头有个周期两周的小项目，时间紧，所以直接把流程里能自动化的部分全交给了工具链，人只负责把关关键节点。 踩过的坑主要是配置层面。文档写得比较理想化，实际跑起来至少有两处和预期不一致，查 issue 才找到解法，后面附上具体配置。

性能对比：ISR vs SSR vs SSG。我的选择是公共页面用 ISR（revalidate: 3600），用户页面用 SSR（个性化数据），认证页面用 SSG（表单页）。ISR 缓存安全要确保 SSR 输出对所有用户相同，不含 session 数据。 数据库设计用了 Prisma + Pos...

踩坑最深的莫过于 Server Component 中 cookies().set() 和 redirect() 不兼容的问题。一开始在 page.tsx 里设置 cookie 后 redirect，cookie 死活不生效。后来改成 Server Action 就好了。另外 next/dynami...

安全方面做了：密码 bcrypt 哈希、API 限流（认证 5 次/15min，通用 60 次/min）、CORS 只允许主域、禁止 dangerouslySetInnerHTML、环境变量分离 NEXT_PUBLIC_ 和服务端变量。XSS 和 SQL 注入 Prisma 天然防护。 认证系统踩...

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

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

最近在实际项目里反复验证了这套做法，今天抽空整理出来。先说结论：{kw}这件事，方法论比工具选择更重要，工具只是放大器。 具体步骤： 1. 先跑通最小闭环； 2. 再逐步替换流程节点； 3. 每一步都留回退方案。别一上来就全量替换，出问题很难定位。 背景是这样的：手头有个周期两周的小项目，时间紧，所以直接把流程里能自动化的部分全交给了工具链，人只负责把关关键节点。

背景是这样的：手头有个周期两周的小项目，时间紧，所以直接把流程里能自动化的部分全交给了工具链，人只负责把关关键节点。 利益相关：纯个人实践，无任何商业合作。配置文件文末自取。 背景是这样的：手头有个周期两周的小项目，时间紧，所以直接把流程里能自动化的部分全交给了工具链，人只负责把关关键节点。 补充一点：如果团队里有人对这块不熟，建议先做个 15 分钟的内部分享再推进，共识成本远低于返工成本。

认证系统踩了不少坑。Auth.js 5 beta 的 JWT callback 必须处理 trigger === 'update'，否则用户修改资料后 session 不刷新。middleware 只做认证重定向，不做业务状态重定向（如 onboarding），业务重定向在 Server Compo...

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

踩坑最深的莫过于 Server Component 中 cookies().set() 和 redirect() 不兼容的问题。一开始在 page.tsx 里设置 cookie 后 redirect，cookie 死活不生效。后来改成 Server Action 就好了。另外 next/dynami...

项目的 generateMetadata 完整配置：title 用模板（{页面标题} | {品牌名}），description 120-160 字符含关键词，OG 图片用 next/og 动态生成 1200x630，Twitter Card 用 summary_large_image，robots...

认证系统踩了不少坑。Auth.js 5 beta 的 JWT callback 必须处理 trigger === 'update'，否则用户修改资料后 session 不刷新。middleware 只做认证重定向，不做业务状态重定向（如 onboarding），业务重定向在 Server Compo...

性能对比：ISR vs SSR vs SSG。我的选择是公共页面用 ISR（revalidate: 3600），用户页面用 SSR（个性化数据），认证页面用 SSG（表单页）。ISR 缓存安全要确保 SSR 输出对所有用户相同，不含 session 数据。 最花时间的是表单交互细节。每个表单字段都...

补充一点：如果团队里有人对这块不熟，建议先做个 15 分钟的内部分享再推进，共识成本远低于返工成本。 补充一点：如果团队里有人对这块不熟，建议先做个 15 分钟的内部分享再推进，共识成本远低于返工成本。 利益相关：纯个人实践，无任何商业合作。配置文件文末自取。 补充一点：如果团队里有人对这块不熟，建议先做个 15 分钟的内部分享再推进，共识成本远低于返工成本。

最后留个开放问题：大家在规模化场景下是怎么做权衡的？欢迎评论区聊聊，我后续会把好的思路更新进正文。 补充一点：如果团队里有人对这块不熟，建议先做个 15 分钟的内部分享再推进，共识成本远低于返工成本。 踩过的坑主要是配置层面。文档写得比较理想化，实际跑起来至少有两处和预期不一致，查 issue 才找到解法，后面附上具体配置。

补充一点：如果团队里有人对这块不熟，建议先做个 15 分钟的内部分享再推进，共识成本远低于返工成本。 利益相关：纯个人实践，无任何商业合作。配置文件文末自取。 补充一点：如果团队里有人对这块不熟，建议先做个 15 分钟的内部分享再推进，共识成本远低于返工成本。 背景是这样的：手头有个周期两周的小项目，时间紧，所以直接把流程里能自动化的部分全交给了工具链，人只负责把关关键节点。