作品展示

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

数据可视化用 Recharts 做图表，折线图/柱状图/饼图都有。关键：图表组件用 next/dynamic 懒加载（ssr:false），因为 Recharts 依赖浏览器 API。数据获取在 Server Component 完成，通过 props 传给 Client Component 的图表...

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

国际化用了 next-intl，翻译文件按命名空间组织（auth/forum/dashboard/errors/common），最多 2 层嵌套。ICU 插值用 {min}/{max} 占位符。中间件做 i18n 路由处理，URL 格式 /{locale}/...。所有用户可见文本都走 t()，没有...

最有成就感的是 Core Web Vitals 全绿。LCP 优化用了 next/image + priority + next/font，INP 优化拆分了长任务用 requestIdleCallback，CLS 优化给所有图片设了 width/height。移动端测试用 PageSpeed In...

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

从 0 到 1 的节奏：第一天搭框架（认证 + 数据库 + UI 组件库），第二天做核心功能（CRUD + 交互），第三天打磨体验（动画 + 错误处理 + 响应式）。AI 帮我省了大量模板代码时间，但架构设计和用户体验细节还是靠人的判断。 SEO 内容策略：每个功能页都有独立的 generateM...

用户反馈最积极的是暗色模式和加载体验。暗色模式用 next-themes 实现，CSS 变量控制配色。加载状态用 skeleton 骨架屏，比 spinner 体验好很多。表单提交用按钮 loading 状态 + toast 反馈，空状态有引导文案和插画。 数据可视化用 Recharts 做图表，...

从 0 到 1 的节奏：第一天搭框架（认证 + 数据库 + UI 组件库），第二天做核心功能（CRUD + 交互），第三天打磨体验（动画 + 错误处理 + 响应式）。AI 帮我省了大量模板代码时间，但架构设计和用户体验细节还是靠人的判断。 这个项目我用 Next.js 15 App Router...

用户反馈最积极的是暗色模式和加载体验。暗色模式用 next-themes 实现，CSS 变量控制配色。加载状态用 skeleton 骨架屏，比 spinner 体验好很多。表单提交用按钮 loading 状态 + toast 反馈，空状态有引导文案和插画。 认证系统踩了不少坑。Auth.js 5...

部署流程：GitHub push → Vercel 自动构建 → Preview 环境 → 合并到 main → Production 环境。环境变量在 Vercel Dashboard 配置，区分 Production/Preview/Development。数据库迁移用 GitHub Actio...

支付集成用的 Stripe，Webhook 处理订阅状态变更。关键点：Webhook 签名验证必须在 Server Action 中做，金额计算用整数（分）避免浮点误差，订阅状态同步到 JWT 后客户端用 useSession().update() 刷新。 最有成就感的是 Core Web Vit...

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