Pages Router 和 App Router 的区别

Next.js的路由是基于文件系统的，遵循约定优于配置的原则，也就是需要遵循特定的文件结构和文件命名规范。并且分为两种，一种是Pages Router (v13.4之前)和 App Router。

主要区别

功能	App Router	Pages Router
基于文件的路由	使用嵌套文件夹定义路由	文件直接表示路由
组件	默认服务器组件	默认客户端组件
数据获取	使用fetch函数	getServerSideProps、getStaticProps、getInitialProps
布局	布局可以是嵌套的和动态的	布局是静态的
动态路由	支持，但语法不同	支持
客户端导航	支持 router.push	Link 组件
优先级	优先于Pages Router	如果 App Router 中没有匹配的路由，则回退

Pages Router

文件目录结构

└── pages
    ├── index.tsx
    ├── login.tsx
    ├── api
    │   └── user.tsx
    ├── posts
    │   └── [id].tsx
    └── blog
        ├── index.tsx
        └── setting.tsx

所有路由页面文件都存放在pages 文件夹下面，Next.js会根据文件名自动生成对应的路由，如下所示

常规路由

• pages/index.js → /
• pages/blog/index.js → /blog

其中每个页面是一个默认导出格式的React组件(包括.js, .jsx, .ts, 或者 .tsx)

export default function About() {
	return <div>About</div>
}

嵌套路由

• pages/blog/first-post.js → /blog/first-post
• pages/dashboard/settings/username.js → /dashboard/settings/username

动态路由

• pages/posts/[id].js → /posts/1 or /posts/2 ...

动态参数可以通过useRoute获取

App Router

文件目录结构

└── app
    ├── blog
    │   └── [slug]
    │        └── page.tsx
    ├── login
    │   └── page.tsx
    ├── @analytics
    │   ├── page.tsx
    │   ├── error.tsx
    │   └── loading.tsx
    ├── api
    │   └── user
    │       ├── index.ts
    │       └── route.ts  
    ├── components
    │   ├── loading.tsx
    │   └── button.tsx    
    ├── globals.css
    ├── layout.tsx
    └── page.tsx

与Pages Router的最大区别在于设置了更细粒度规范，同时支持React Server Component

layout.js：定义公共的页面布局 template.js：类似 layout，不同之处在于layout会在路由之间保存状态，而template在导航时会为每个子项创建一个新实例。 page.js：默认的路由页面，类似Pages Router的index.js route.js：定义路由处理程序 loading.js：在加载时显示加载中 UI not-found.js：处理 notFound error（HTTP 404）或任何未知路径错误 error.js：显示错误 UI，必须为客户端组件 global-error.js：全局错误 UI default.js：处理 Parallel Routes（平行路由） 遇到渲染问题时，用来替代显示的 UI（fallback UI）

常规路由

app/page.tsx → / app/login/page.tsx → /login

动态路由

app/blog/[slug]/page.tsx → /blog/[slug]

嵌套路由

app/blog/[slug]/[comment]/page.tsx → /blog/[slug]/[comment]

分组路由

分组路由可以更好的组织项目中的文件结构，某些情况下为了避免路由页面太过分散，可以通过分组路由来更好地组织路由，这样可以让项目页面文件结构更加清晰。分组路由的使用方式很简单，使用括号包裹的文件夹名即可，该文件夹不会包含在路由的 URL 路径中。

平行路由（以@为前缀的文件夹）

平行路由允许在同一层级下定义多个独立的路由分支。例如：

这样可以在同一页面内同时显示 analytics 和 team 页面，而不影响彼此的渲染逻辑。

总结

Next.js提供了两种路由系统：Pages Router和App Router。Pages Router基于直接的文件路由，组件默认为客户端渲染，使用特定函数进行数据获取。App Router采用嵌套文件夹定义路由，默认使用服务器组件，通过fetch函数获取数据，支持嵌套和动态布局。App Router引入了更细粒度的文件规范，如layout.js、loading.js等，并支持平行路由。总体而言，App Router提供了更灵活和强大的路由功能，是Next.js的未来发展方向。