星辰
星辰大海楼主
最花时间的是表单交互细节。每个表单字段都有输入约束预提示(长度/格式/范围),Zod 校验错误消息和 hint 文本保持一致,四态(加载/空/错误/成功)都有视觉反馈。破坏性操作(删除/清空)有二次确认弹窗,未保存变更离开有提醒。
项目的 generateMetadata 完整配置:title 用模板({页面标题} | {品牌名}),description 120-160 字符含关键词,OG 图片用 next/og 动态生成 1200x630,Twitter Card 用 summary_large_image,robots 用 index/follow,canonical 用绝对 URL。
数据可视化用 Recharts 做图表,折线图/柱状图/饼图都有。关键:图表组件用 next/dynamic 懒加载(ssr:false),因为 Recharts 依赖浏览器 API。数据获取在 Server Component 完成,通过 props 传给 Client Component 的图表组件。