Next.js App Router App 路由
最后更新：2026-10-28
Next.js App Router App 路由
App Router 是 Next.js 13+ 的文件约定路由：app/ 下每个文件夹即一个 URL 片段，page.tsx 定义页面，layout.tsx 是不重渲染的共享布局，loading/error 文件自动处理加载与错误。
| 分组 | 生态与进阶 |
|---|---|
| 类型 | 模式 |
| 引入版本 | Next.js 13 引入（App Router），14 / 15 持续演进 |
ℹ️ 说明 编辑器将 JSX 转译为 JavaScript 后在沙箱中渲染真实界面；组件自动挂载，无需手写 render 调用。
📝 语法
app/
├─ layout.tsx # 根布局：所有路由共享
├─ page.tsx # 路由 /（首页）
├─ about/
│ └─ page.tsx # 路由 /about
└─ posts/
├─ page.tsx # 路由 /posts
└─ [slug]/
└─ page.tsx # 动态路由 /posts/:slug
// app/about/page.tsx —— 服务端组件默认可直接 async
export default async function AboutPage() {
return <h1>关于我们</h1>
}⚙️ 参数
| page.tsx | 路由的唯一入口文件，目录里缺少它就不会生成对应路由。 |
|---|---|
| layout.tsx | 共享布局组件，子路由切换时保持挂载、不重渲染，适合放导航栏与侧栏。 |
| [slug] 动态段 | 方括号文件夹名声明动态参数，页面组件通过 params.slug 读取实际值。 |
返回值：无返回值，App Router 是文件约定路由，规则说明见语法与示例。
▶ 示例
示例可直接运行：展开后自动渲染，编辑代码即时生效。
输出结果：
模拟演示：左侧是「页面切换模拟器」，点击四个路由按钮切换当前页面（高亮蓝色）；右侧文件树面板实时显示当前 URL 对应的 app/ 目录文件路径，如 /posts/hello 对应 app/posts/[slug]/page.tsx。直观展示「文件即路由」的约定。💡 要点
💡 提示 layout 默认在路由切换间保持挂载，把导航栏、侧栏放这里可以避免整页重渲染并保留内部状态。
ℹ️ 说明 page.tsx 顶部没有 'use client' 就是服务端组件，可以直接 async/await 取数，无需 useEffect。
⚠️ 注意 文件夹名决定 URL 且区分大小写，重命名文件夹即改变路由地址，注意同步内链。
🏷️ 生态与进阶相关
💡 相关案例
更多案例整理中，敬请期待。
📚 相关教程
❓ 常见问题
Q App Router 和 Pages Router 有什么区别？
A Pages Router 用 pages/ 目录加 getServerSideProps 等数据函数；App Router 用 app/ 目录约定，默认服务端组件，布局嵌套更自然，是官方推荐的新项目选择。
Q layout 和 template 有什么区别？
A layout 在子路由切换时保持挂载、不重渲染；template 每次导航都会重新挂载实例（会重触发入场动画），需要「每次刷新状态」时才用。
Q 怎么定义动态路由？
A 文件夹名用方括号，如 app/posts/[slug]/page.tsx 对应 /posts/:slug；页面组件的 params 参数里能拿到 slug 值，[...slug] 还可捕获多段路径。
