一、这个技术是什么？

传统项目需要单独维护路由表，页面文件、布局文件和错误处理文件之间容易失去对应关系。

App Router 让目录结构参与路由设计：目录表达 URL 层级，特殊文件表达页面、布局、加载和错误边界。

二、没有它之前发生了什么？

路由表和页面文件分开维护
↓
URL、布局和代码位置容易不一致
↓
嵌套路由需要手动处理共享 UI
↓
Next.js 用文件约定表达页面结构

三、核心概念

1. page.tsx

page.tsx 表示一个可以被访问的页面入口。

2. layout.tsx

layout.tsx 提供同一层级及其子路由共享的布局，例如导航和侧栏。

3. Dynamic Segment

[slug] 或 [id] 表示动态参数，例如 /knowledge/[slug]。

4. loading.tsx 与 error.tsx

它们分别提供加载状态和错误边界，让页面不必把所有状态都写在一个组件里。

5. generateStaticParams

它可以在构建时告诉 Next.js 哪些动态参数需要预生成，适合知识库详情页。

四、运行流程

五、面试复习

一句话回答

App Router 用 app 目录和文件约定组织路由，page 表示页面，layout 表示共享布局，动态目录可以接收 URL 参数。

高频追问

• page.tsx 和 layout.tsx 的区别是什么？
• [slug] 如何读取参数？
• 为什么知识详情页适合使用 generateStaticParams？
• loading.tsx 的作用是什么？

容易答错

不要把目录名简单当成普通文件夹。App Router 中目录层级会影响 URL 和布局嵌套关系。

六、项目展示

当前知识平台使用 /knowledge/[slug] 生成详情页，三个样例由同一个动态路由处理，新增 Markdown 后可以自动扩展页面数量。