Next.js App Router 深入解析

从 Pages Router 到 App Router

Next.js 13 引入了全新的 App Router，它基于 React Server Components（RSC）构建，从根本上改变了我们构建 Next.js 应用的方式。与传统的 Pages Router 相比，App Router 带来了更好的性能、更灵活的布局系统，以及更简洁的数据获取方式。

文件系统路由

App Router 使用文件夹来定义路由，每个文件夹代表一个 URL 段。要让某个路由可访问，只需在该文件夹中添加一个 `page.tsx` 文件。这种约定大于配置的设计，使得项目结构直观易懂。

app/
├── page.tsx          → /
├── blog/
│   ├── page.tsx      → /blog
│   └── [slug]/
│       └── page.tsx  → /blog/:slug
└── about/
    └── page.tsx      → /about

布局系统

App Router 最强大的特性之一是嵌套布局。`layout.tsx` 文件定义的 UI 会在页面间共享，且导航时不会重新渲染。这意味着你可以轻松实现持久化的侧边栏、导航栏等 UI 组件，同时只更新页面内容部分。

服务端组件优先

在 App Router 中，所有组件默认都是 Server Components。它们在服务器端渲染，不会增加客户端 JavaScript 体积。只有需要交互（事件处理、状态管理等）的组件才需要添加 `"use client"` 指令，变成 Client Component。

流式渲染

通过 `loading.tsx` 文件和 React 的 `<Suspense>` 边界，App Router 支持渐进式页面渲染。用户不需要等待整个页面加载完成才能看到内容——服务器会先发送布局和加载骨架，然后再流式传输页面主体。

总结

App Router 代表了 Next.js 的未来方向。它通过 React Server Components 实现了更好的性能，通过嵌套布局提供了更灵活的 UI 组合方式，通过流式渲染优化了用户体验。如果你正在开始一个新项目，强烈建议使用 App Router。