用 Cursor 做的 Next.js 短链服务，附技术架构

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

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

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

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