App Router 和 Pages Router 的区别

App Router 和 Pages Router 是 Next.js 的两套完全不同的路由架构，主要区别体现在功能理念、文件结构、用法和灵活性上。

两者区别

路由类型	简洁描述
Pages Router	传统结构，基于“文件=路由”模型，适合小型项目，快速上手
App Router	新架构，支持嵌套路由、布局复用、服务端组件（RSC），功能更强更现代

文件结构对比

Pages Router 结构	App Router 结构
pages/index.js	app/page.js
pages/about.js	app/about/page.js
❌ 不支持嵌套路由	✅ 支持嵌套子目录结构
布局只能在 _app.js 控制	每个目录可定义独立 layout.js

核心区别详解

特性	Pages Router	App Router
文件夹结构	单层扁平结构（基于 pages/）	多层嵌套结构（基于 app/）
组件类型	全部是客户端组件（Client）	支持服务端组件（Server Components）
布局 Layout	统一 _app.js 控制	每层可定义 layout.js，层层组合
嵌套路由	不支持嵌套子页面结构	完全支持多层级嵌套路由
数据获取方式	getStaticProps / getServerSideProps	fetch() + async + React Server Component
页面生命周期	页级数据函数	组件级生命周期（服务端/客户端）
加载状态/错误处理	需要自己写逻辑	内置 loading.js / error.js 支持
使用年份（推荐阶段）	早期项目通用	Next.js 13+ 推荐标准
迁移难度	简单	高（结构变化较大）

举个简单例子：

Pages Router：

pages/
├── index.js       → '/'
├── about.js       → '/about'

App Router（更强，分层清晰）：

app/
├── layout.js         // 根布局
├── page.js           // '/'
├── about/
│   ├── layout.js     // about 页面特有布局
│   ├── page.js       // '/about'
├── (marketing)/
│   ├── landing/
│   │   └── page.js   // '/landing'，不含 group 名

app/(marketing)/landing/page.js 对应的 URL 是 /landing，而不是 /marketing/landing —— 这就是 () 分组目录的作用：组织结构而不影响 URL

如果你看到 (dashboard)/stats/page.tsx，它表示：

• 文件结构用于“分组”，但路径中不会包含 (dashboard)
• 渲染地址是 /stats
• 可以用于权限分组、多布局区分，但不会污染 URL，让代码结构更清晰

注意：两者不能混用！

一旦项目用了 app/，就视为 App Router 项目，不要再在 pages/ 中写页面，否则路由冲突。