前端2026-04-12·8 分钟
Next.js App Router 的布局分层实践
梳理 layout、template、page 的职责边界,避免页面复杂后结构失控。
背景
页面在增长时,最容易混乱的是共享 UI 和页面级状态。App Router 的分层能力正好用来解决这个问题。
我的分层习惯
- 全局导航放根
layout - 业务分区放路由组
layout - 需要强制重新渲染的场景放
template
收益
当你提前拆好层级,后面新增页面时几乎不需要再改全局结构。
Next.jsApp Router架构