Next.js2026-07-05阅读约 7 分钟
Next.js App Router 页面组织模式
结合布局、页面和链接能力，整理适合中小型内容站点与业务项目的目录拆分方式。
App Router路由设计服务端组件
App Router 采用基于文件系统的路由，目录结构直接映射到 URL。这带来的好处是路由关系可读性强，新成员通过目录就能理解站点结构。
布局（layout）用于承载跨页面共享的 UI，导航过程中布局会保留状态、不重复渲染。把导航栏、侧边栏放进布局，可以避免每个页面重复实现。
动态段用方括号命名，例如 [slug]，用于从数据生成多个页面。配合 generateStaticParams，可以在构建期预生成这些路由，兼顾性能与 SEO。
对中小型项目，推荐按业务域拆分目录，把数据、页面和局部组件就近放置。这种组织方式减少了跨目录跳转，也让后续扩展详情页、列表页更自然。