SorryToPerson logo
返回
前端2026-04-12·8 分钟

Next.js App Router 的布局分层实践

梳理 layout、template、page 的职责边界,避免页面复杂后结构失控。

背景

页面在增长时,最容易混乱的是共享 UI 和页面级状态。App Router 的分层能力正好用来解决这个问题。

我的分层习惯

  • 全局导航放根 layout
  • 业务分区放路由组 layout
  • 需要强制重新渲染的场景放 template

收益

当你提前拆好层级,后面新增页面时几乎不需要再改全局结构。

Next.jsApp Router架构