内卷
作品展示内卷幸存者
作品：Next.js AI 客服窗口，OpenAI 流式输出
这个项目的 Admin 后台是独立认证体系，HMAC-SHA256 签名 session，和前台 Auth.js 完全隔离。Admin 路由在 (admin) 路由组内，独立的 layout 和 error boundary。Admin Actions 和前台 Actions 分文件存放，不混用认证...
31013
这个项目的 Admin 后台是独立认证体系，HMAC-SHA256 签名 session，和前台 Auth.js 完全隔离。Admin 路由在 (admin) 路由组内，独立的 layout 和 error boundary。Admin Actions 和前台 Actions 分文件存放，不混用认证...
最有成就感的是 Core Web Vitals 全绿。LCP 优化用了 next/image + priority + next/font，INP 优化拆分了长任务用 requestIdleCallback，CLS 优化给所有图片设了 width/height。移动端测试用 PageSpeed In...
认证系统踩了不少坑。Auth.js 5 beta 的 JWT callback 必须处理 trigger === 'update'，否则用户修改资料后 session 不刷新。middleware 只做认证重定向，不做业务状态重定向（如 onboarding），业务重定向在 Server Compo...
用户反馈最积极的是暗色模式和加载体验。暗色模式用 next-themes 实现，CSS 变量控制配色。加载状态用 skeleton 骨架屏，比 spinner 体验好很多。表单提交用按钮 loading 状态 + toast 反馈，空状态有引导文案和插画。 安全方面做了：密码 bcrypt 哈希、...
数据可视化用 Recharts 做图表，折线图/柱状图/饼图都有。关键：图表组件用 next/dynamic 懒加载（ssr:false），因为 Recharts 依赖浏览器 API。数据获取在 Server Component 完成，通过 props 传给 Client Component 的图表...
踩坑最深的莫过于 Server Component 中 cookies().set() 和 redirect() 不兼容的问题。一开始在 page.tsx 里设置 cookie 后 redirect，cookie 死活不生效。后来改成 Server Action 就好了。另外 next/dynami...
部署流程：GitHub push → Vercel 自动构建 → Preview 环境 → 合并到 main → Production 环境。环境变量在 Vercel Dashboard 配置，区分 Production/Preview/Development。数据库迁移用 GitHub Actio...
部署流程：GitHub push → Vercel 自动构建 → Preview 环境 → 合并到 main → Production 环境。环境变量在 Vercel Dashboard 配置，区分 Production/Preview/Development。数据库迁移用 GitHub Actio...
踩坑最深的莫过于 Server Component 中 cookies().set() 和 redirect() 不兼容的问题。一开始在 page.tsx 里设置 cookie 后 redirect，cookie 死活不生效。后来改成 Server Action 就好了。另外 next/dynami...
用户反馈最积极的是暗色模式和加载体验。暗色模式用 next-themes 实现，CSS 变量控制配色。加载状态用 skeleton 骨架屏，比 spinner 体验好很多。表单提交用按钮 loading 状态 + toast 反馈，空状态有引导文案和插画。 数据库设计用了 Prisma + Pos...
这个产品上线一个月了，目前 300 注册用户，日活 50 左右。获客渠道主要是 SEO 自然流量和 Product Hunt 发布。SEO 内容用 AI 辅助生成但人工改写降 AI 率，核心关键词排到了 Google 第一页。Product Hunt 发布当天带来了 200 注册用户。 部署流程：...
支付集成用的 Stripe，Webhook 处理订阅状态变更。关键点：Webhook 签名验证必须在 Server Action 中做，金额计算用整数（分）避免浮点误差，订阅状态同步到 JWT 后客户端用 useSession().update() 刷新。 最花时间的是表单交互细节。每个表单字段都...
最花时间的是表单交互细节。每个表单字段都有输入约束预提示（长度/格式/范围），Zod 校验错误消息和 hint 文本保持一致，四态（加载/空/错误/成功）都有视觉反馈。破坏性操作（删除/清空）有二次确认弹窗，未保存变更离开有提醒。 项目的 generateMetadata 完整配置：title 用...
SEO 成果：上线两周 Google 收录了 38 个页面，核心关键词排到了第二页。做了完整的 generateMetadata、sitemap.xml、robots.txt、JSON-LD 结构化数据。hreflang 配了中英双语，每页都有自引用和 x-default。内链结构是扁平化的，所有页...
数据可视化用 Recharts 做图表，折线图/柱状图/饼图都有。关键：图表组件用 next/dynamic 懒加载（ssr:false），因为 Recharts 依赖浏览器 API。数据获取在 Server Component 完成，通过 props 传给 Client Component 的图表...
这个产品上线一个月了，目前 300 注册用户，日活 50 左右。获客渠道主要是 SEO 自然流量和 Product Hunt 发布。SEO 内容用 AI 辅助生成但人工改写降 AI 率，核心关键词排到了 Google 第一页。Product Hunt 发布当天带来了 200 注册用户。 最得意的功...
最花时间的是表单交互细节。每个表单字段都有输入约束预提示（长度/格式/范围），Zod 校验错误消息和 hint 文本保持一致，四态（加载/空/错误/成功）都有视觉反馈。破坏性操作（删除/清空）有二次确认弹窗，未保存变更离开有提醒。 认证系统踩了不少坑。Auth.js 5 beta 的 JWT ca...
性能数据分享一下：PageSpeed 移动端 98 分，桌面端 100 分。LCP 0.9s，INP 86ms，CLS 0.02。关键优化是 LCP 图片用 next/image + priority，首屏不用 framer-motion 改用 CSS 动画，非首屏组件全部 next/dynamic...
从 0 到 1 的节奏：第一天搭框架（认证 + 数据库 + UI 组件库），第二天做核心功能（CRUD + 交互），第三天打磨体验（动画 + 错误处理 + 响应式）。AI 帮我省了大量模板代码时间，但架构设计和用户体验细节还是靠人的判断。 技术架构上，Server Component 做数据获取和...
最得意的功能是实时协作，用 Yjs + WebSocket 实现多人同时编辑。Yjs 处理 CRDT 数据同步，WebSocket 做实时通信，离线编辑用 IndexedDB 缓存。Next.js 的 API 路由做 WebSocket 中继服务器，部署在 Vercel 的 Edge Runtime...