Frontend Academy · 课时

Pages Router 与 App Router

比较 Next.js 的路由模式：基于文件的 Pages Router，以及支持嵌套布局、加载状态和错误边界的新 App Router。

第 1 / 4 课13 个步骤

Pages Router 与 App Router 是 CoddyKit 上的免费 Frontend Academy 课时。这是第 1 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 Frontend Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Frontend Academy 课程共包含 4 节课。

一个框架中的两套路由系统

Next.js 有两套路由系统：原始的 Pages Router（pages/ 目录）和较新的 App Router（app/ 目录，Next 13+）。两者在 Next 14/15 中仍可使用。

Pages Router — 基于文件的路由

pages/ 下的每个文件都会成为一个路由。动态片段使用方括号：pages/users/[id].tsx 可匹配 /users/123。

pages/
  index.tsx        // route: /
  about.tsx        // route: /about
  blog/
    index.tsx      // route: /blog
    [slug].tsx     // route: /blog/:slug
  api/
    users.ts       // API route: /api/users

Pages Router — 数据获取

特殊导出用于声明数据获取行为：getStaticProps（SSG）、getServerSideProps（SSR）、getStaticPaths（带动态路由的 SSG）。

// pages/posts/[slug].tsx
export async function getStaticPaths() {
  const slugs = await fetchAllSlugs();
  return { paths: slugs.map(s => ({ params: { slug: s } })), fallback: false };
}

export async function getStaticProps({ params }) {
  const post = await fetchPost(params.slug);
  return { props: { post }, revalidate: 60 };
}

export default function Post({ post }) {
  return <article>{post.body}</article>;
}

App Router — 基于文件夹的路由

App Router 使用文件夹作为路由片段。文件夹中的 page.tsx 文件定义该页面。

app/
  layout.tsx       // shared root layout
  page.tsx         // route: /
  about/
    page.tsx       // route: /about
  blog/
    page.tsx       // route: /blog
    [slug]/
      page.tsx     // route: /blog/:slug

App Router — 特殊文件

每个片段都可以使用功能强大的特殊文件：layout.tsx（包围子内容的持久化界面）、loading.tsx（Suspense 后备界面）、error.tsx（错误边界）、not-found.tsx。

嵌套路由布局

App Router 布局会包装嵌套路由，并在导航过程中保持不变，不会重新挂载。

// app/dashboard/layout.tsx
export default function DashboardLayout({ children }) {
  return (
    <div className="dashboard">
      <Sidebar />
      <main>{children}</main>
    </div>
  );
}

// app/dashboard/settings/page.tsx renders inside the Sidebar layout

App Router 中的数据获取

服务器组件可以是异步的，并直接获取数据，无需使用 getServerSideProps/getStaticProps。组件在服务器上运行，只向客户端发送 HTML。

// app/posts/[slug]/page.tsx (Server Component by default)
export default async function Post({ params }) {
  const post = await fetch(`https://api/posts/${params.slug}`, {
    next: { revalidate: 60 } // ISR-like caching
  }).then(r => r.json());
  return <article>{post.body}</article>;
}

App Router 中的客户端组件

在文件顶部添加 'use client'，即可将其中的组件标记为客户端组件（具有交互性，在浏览器中运行）。

// app/Counter.tsx
'use client';
import { useState } from 'react';

export default function Counter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(c => c + 1)}>{count}</button>;
}

API 路由与路由处理程序

Pages Router：pages/api/users.ts 导出一个带有 req/res 的默认函数。App Router：app/api/users/route.ts 使用标准的 Request/Response，将 HTTP 方法（GET、POST）作为具名导出。

// app/api/users/route.ts
export async function GET(request: Request) {
  const users = await db.users.findMany();
  return Response.json(users);
}

export async function POST(request: Request) {
  const body = await request.json();
  const user = await db.users.create({ data: body });
  return Response.json(user, { status: 201 });
}

迁移策略

两套路由系统可以共存于同一个项目中，您可以逐个页面进行渐进式迁移。如果发生冲突，App Router 优先。

何时选择哪一种

新项目：使用 App Router（功能更强，也是当前投入的重点）。已有的 Pages Router 项目：可以继续使用，或逐步迁移。无需布局或 RSC 的小型静态网站：两者均可。

快速检查

如何在 Next.js 应用路由器中将组件标记为客户端组件？

在交互式课程中回答

回顾：页面路由器与应用路由器

页面路由器：基于文件，使用 getStaticProps/getServerSideProps。应用路由器（Next 13+）：基于文件夹，使用异步服务器组件、嵌套布局以及加载和错误文件。使用“use client”标记客户端交互。应用程序接口路由：pages/api/* 与使用 HTTP 方法导出的 app/api/*/route.ts。两者可以共存；目前重点开发应用路由器。

免费开始

用 AI 导师学习 HTML — 免费

在浏览器中编写并运行真实代码，获得全天候 AI 导师的即时帮助，并在网页或应用中继续学习。

课程: 41
课程: 163

免费开始学习查看完整课程

常见问题解答

「Pages Router 与 App Router」课时是免费的吗？

是的 — 「Pages Router 与 App Router」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Frontend Academy 课程的其余内容，请升级到 CoddyKit PRO。 Frontend Academy 课程共包含 4 节课。

「Pages Router 与 App Router」这节课中我会学到什么？

比较 Next.js 的路由模式：基于文件的 Pages Router，以及支持嵌套布局、加载状态和错误边界的新 App Router。你通过在浏览器中直接运行的动手代码来练习 Frontend Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 Frontend Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 Frontend Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 1 节课，共 4 节。

「Pages Router 与 App Router」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 Frontend Academy 课中编写并运行代码吗？

能。每节 Frontend Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 Frontend Academy