App Router 简介
Next.js 14 的 App Router 是全新的文件系统路由系统，以 React Server Components（RSC）为核心。它提供了更好的性能、更简单的数据获取方式。
项目结构
app/ ├── layout.tsx # 根布局 ├── page.tsx # 首页 (/) ├── about/ │ └── page.tsx # 关于页 (/about) ├── blog/ │ ├── page.tsx # 博客列表 (/blog) │ └── [slug]/ │ └── page.tsx # 博客详情 (/blog/:slug) ├── loading.tsx # 全局加载状态 ├── error.tsx # 全局错误边界 └── not-found.tsx # 404 页面
布局（Layout）
// app/layout.tsx
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html>
<body>
<nav>导航栏</nav>
{children}
<footer>页脚</footer>
</body>
</html>
)
}
// app/blog/layout.tsx
export default function BlogLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<section>
<aside>博客侧边栏</aside>
{children}
</section>
)
}
页面（Page）
// app/page.tsx
export default function HomePage() {
return <h1>欢迎来到首页</h1>
}
动态路由
// app/blog/[slug]/page.tsx
export default function BlogPost({
params,
}: {
params: { slug: string }
}) {
return <h1>文章: {params.slug}</h1>
}
路由组
// app/(marketing)/about/page.tsx 和 /about 一样 // app/(marketing)/contact/page.tsx 和 /contact 一样
服务端组件 vs 客户端组件
服务端组件（默认）
// 默认是服务端组件，可以直接访问数据库
async function getPosts() {
const res = await fetch('https://api.example.com/posts')
return res.json()
}
export default async function Blog() {
const posts = await getPosts()
return (
<ul>
{posts.map(post => (
<li key={post.id}>{post.title}</li>
))}
</ul>
)
}
客户端组件
'use client'
import { useState } from 'react'
export default function Counter() {
const [count, setCount] = useState(0)
return (
<button onClick={() => setCount(c => c + 1)}>
点击次数: {count}
</button>
)
}
数据获取
// 在服务端组件中直接获取数据
async function getData() {
const res = await fetch('https://api.example.com/data', {
next: { revalidate: 3600 }, // ISR，每小时重新生成
})
return res.json()
}
加载状态
// app/loading.tsx
export default function Loading() {
return <div>加载中...</div>
}
// app/blog/loading.tsx - 博客页专属加载状态
export default function BlogLoading() {
return <div>博客加载中...</div>
}
错误处理
// app/error.tsx
'use client'
export default function Error({
error,
reset,
}: {
error: Error
reset: () => void
}) {
return (
<div>
<h2>出错了！</h2>
<button onClick={() => reset()}>重试</button>
</div>
)
}
总结
Next.js 14 App Router 是 React 全栈开发的最佳选择。它简化了数据获取、支持服务端组件、提供更好的性能。建议新项目直接使用 App Router。
