App Router 和 Pages Router 之间有什么区别？

Question

Accepted Answer

Next.js 有**两个路由系统**。**Pages Router** (`pages/`) 是原始的；**App Router** (`app/`，自 Next 13 以来)是更新的、推荐的，围绕 React Server Components 构建。 ## 文件和约定差异 ```text Pages Router (pages/) App Router (app/) ────────────────────────────────────────────────────── pages/about.tsx → /about app/about/page.tsx → /about Default export = page page.tsx = page, layout.tsx = layout getServerSideProps (SSR) async Server Components (fetch directly) getStaticProps (SSG) fetch() with caching options _app.tsx / _document.tsx Nested layout.tsx files All components client-rendered Server Components by default ``` ## 关键概念转变：Server Components ```tsx // App Router — a Server Component that fetches data directly, no extra API // app/users/page.tsx export default async function Users() { const res = await fetch("https://api.example.com/users"); // runs on the SERVER const users = await res.json(); return

{u.name}

; } ``` 在 App Router 中，组件默认是 **Server Components** — 它们在服务器上运行，可以直接 `await` 数据，并且为该组件向浏览器发送零 JS。而 Pages Router 使用特殊函数（`getServerSideProps`）将数据传递给客户端渲染的页面。 ## App Router 添加的功能 - **嵌套布局**在导航中保持不变 (`layout.tsx`)。 - **Server Components**（更少的客户端 JS、直接数据访问）。 - **Streaming** 使用 `loading.tsx` / Suspense。 - **Server Actions** 用于无需 API 路由的变更。 ## 使用哪个对于新项目使用 **App Router** — 这是 Next.js 开发的重点。Pages Router 仍然受支持（两者可以在一个应用中共存），但本质上处于维护模式。 ## 为什么这很重要 App Router 代表了 Next.js 的当前架构（Server Components、嵌套布局、streaming）。了解它与旧版 Pages Router 的区别——尤其是服务器优先的默认值和布局模型——对于在任何现代 Next.js 代码库中工作至关重要。