问题背景
产品官网需要能被搜索引擎收录，也需要方便快速调整文案和 CTA。
为什么建议用 Next.js 做官网
官网类页面的核心不是“写多少交互”，而是“能不能被搜索、能不能稳定改、能不能快速上线”。Next.js 在这类场景里有三个优势：
- App Router 适合做首页、功能页和内容页。
- Metadata API 让 SEO 配置集中在代码里。
- 服务端渲染和静态生成都能兼顾，后期扩展空间大。
页面结构怎么拆
一个产品官网，不建议把所有内容塞到一页。更稳的做法是拆成几类页面：
首页
首页负责讲清楚产品价值，重点是首屏和主 CTA。
功能页
功能页负责解释“为什么有这个功能、适合谁、怎么用”。
内容页
内容页承接搜索流量和长尾问题，适合教程、对比、FAQ。
推荐的实现顺序
第 1 步：先把路由搭起来
至少准备这些页面：
txt
/ 首页
/pricing 定价
/docs 文档或指南
/tutorials 教程列表
/about 关于页第 2 步：统一 Metadata
每个页面都要有自己的 title、description 和 Open Graph 信息。这样分享链接时，标题和预览图不会乱。
第 3 步：把首页拆成固定模块
首页建议由这些部分组成：
- Hero：一句话说明产品。
- Problem：说明痛点。
- Solution：说明你怎么解决。
- Proof：展示截图、数据或案例。
- FAQ：减少用户犹豫。
- CTA：再次引导行动。
第 4 步：保留文案可编辑性
不要把所有内容都写死在一个组件里。后期迭代时，最容易改的通常是文案、排序和 CTA，而不是布局本身。
技术实现建议
使用 App Router
如果你本身就在用 Next.js 13+，建议直接用 App Router。它更适合内容站、官网和营销页的混合结构。
图片和截图尽量统一处理
产品官网离不开截图。建议统一封装图片尺寸、边框和圆角，避免每个页面都写一套样式。
SEO 信息集中管理
首页、功能页、文章页都应该有不同的 metadata。不要所有页面都共用同一份 title。
常见问题
首页看起来太空
通常是因为信息层级不够。你需要在首屏之外再给用户一层“为什么信你”的内容。
搜索引擎不收录
先检查是否有正确的 robots.txt、sitemap.xml 和可访问的生产域名，再检查内容是否真的可索引。
文案改起来很痛
把文案变成可配置数据，至少把 hero、按钮、FAQ、说明文案拆出来。
验证方式
上线后检查这四项：
- 首页是否能被正确抓取。
- 页面标题和描述是否正常。
- Open Graph 预览是否正确。
- 主要 CTA 是否能被追踪。