返回文章列表
2 分钟阅读

Next.js App Router 的内容站点实践

记录用 App Router 构建个人博客时,路由、布局、Server Components 与内容读取之间的几个关键取舍。

先从路由树开始

内容站点的路由通常不复杂,但它决定了后续代码的形状。首页负责引导,文章列表负责浏览,详情页负责阅读体验,标签页负责低成本聚合。

App Router 的优势在于布局、数据读取和页面边界可以自然地贴合这个结构。对于博客来说,大多数页面都可以保持为 Server Components。

Server Components 适合内容读取

读取本地 MDX、解析 frontmatter、排序文章和生成 metadata 都是服务端更自然的事情。把这些逻辑放在服务端,可以减少客户端 JavaScript,也能让页面输出更稳定。

客户端组件只留给必要交互

主题切换、移动端抽屉、下拉菜单这类交互才需要 use client。如果一个组件只展示内容,优先让它留在服务端。

保持内容系统可替换

首版使用 src/content/posts 存放 MDX 文件已经足够。它简单、可版本管理,也便于未来迁移到 CMS 或数据库。

关键是不要过早抽象。先把文章读取、标签聚合、目录生成这些基础能力写清楚,再根据真实需求演进。

小结

App Router 很适合个人内容站点,但前提是保持边界清晰:路由负责页面结构,lib 负责数据读取,组件负责展示,内容文件只关心写作。