返回文章列表
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 负责数据读取,组件负责展示,内容文件只关心写作。