展示：Next.js 在线 IDE，Monaco + 沙箱执行

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

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

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

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

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