Next.js App Router 完全指南：现代 React 全栈开发实践

什么是 App Router？

App Router 是 Next.js 推出的新一代路由系统，它基于 React Server Components 构建，为开发者提供更强大的数据获取能力、更优秀的性能以及更加灵活的路由组织方式。

相比 Pages Router，App Router 不仅仅是目录结构的变化，更代表着 Next.js 在全栈开发方向的一次重要升级。

App Router 的目标是让页面、数据获取、布局以及服务端逻辑更加自然地融合在一起。

为什么需要 App Router？

随着项目规模不断扩大，传统 Pages Router 会遇到一些问题：

• 页面与布局耦合
• 数据请求方式不统一
• 多级 Layout 难以维护
• Loading 与 Error 状态需要手动处理

App Router 针对这些问题进行了重新设计。

App Router 的目录结构

一个典型的项目结构如下：

app/
├── layout.tsx
├── page.tsx
├── loading.tsx
├── error.tsx
├── not-found.tsx
└── dashboard/
    ├── layout.tsx
    ├── page.tsx
    └── settings/
        └── page.tsx

其中：

• page.tsx 表示页面
• layout.tsx 表示共享布局
• loading.tsx 表示加载状态
• error.tsx 用于异常处理
• not-found.tsx 自定义 404 页面

React Server Components

App Router 默认采用 React Server Components。

服务端组件运行在服务器，不会发送到浏览器，因此能够：

• 减少 JavaScript Bundle
• 提高首屏渲染速度
• 直接访问数据库
• 提升 SEO 效果

如果组件需要浏览器能力，则可以使用：

'use client'

将组件声明为客户端组件。

Layout 的优势

Layout 是 App Router 最重要的能力之一。

多个页面可以共享同一个 Layout，而 Layout 不会因为页面切换而重复渲染。

这意味着导航栏、侧边栏以及主题状态都能够保持不变，大大提升用户体验。

数据获取

在 App Router 中，可以直接在 Server Component 中使用 async/await：

export default async function Page() {
  const posts = await getPosts()

  return <PostList posts={posts} />
}

无需额外使用 getServerSideProps 或 getStaticProps。

Metadata 与 SEO

App Router 提供了 Metadata API，可以非常方便地定义 SEO 信息。

例如：

• title
• description
• keywords
• Open Graph
• Twitter Card

这样既提高了搜索引擎友好度，也方便统一管理页面元数据。

适用场景

App Router 非常适合：

• 企业官网
• 博客系统
• SaaS 平台
• 电商系统
• 后台管理系统

对于需要良好 SEO、首屏性能以及复杂布局管理的项目，App Router 是推荐选择。

总结

App Router 并不仅仅是新的路由系统，它重新定义了 Next.js 的开发方式。

结合 React Server Components、Nested Layout、Streaming、Server Actions 等能力，开发者可以更加高效地构建现代 Web 应用。

如果你正在开始一个新的 Next.js 项目，优先选择 App Router 将是一个长期受益的决定。