# Next.js App Router 完全指南
Next.js 13+ 的 App Router 是一次重大范式转变，它将 React Server Components (RSC) 带到了生产环境。
## 核心概念
### Server Components vs Client Components
服务器组件是 App Router 的默认组件类型，它们在服务器端渲染，可以直接访问数据库、文件系统等服务端资源。
客户端组件需要在文件顶部添加 'use client' 指令，用于需要交互性、状态管理或浏览器 API 的场景。
### 数据获取
App Router 推荐在服务器组件中直接 fetch 数据，无需 useEffect 或 SWR：
async function PostDetail({ params }) {
const post = await db.query.posts.findFirst({
where: eq(posts.slug, params.slug)
})
if (!post) notFound()
return <article>{post.content}</article>
}
## 路由约定
App Router 基于文件系统的路由约定：
app/
├── layout.tsx 根布局
├── page.tsx 首页 /
├── blog/
│ ├── page.tsx /blog
│ └── [slug]/
│ └── page.tsx /blog/:slug
└── about/
└── page.tsx /about
## 最佳实践
1. 默认使用 Server Components，只在需要交互时使用 Client Components
2. 在叶子组件获取数据，避免 prop drilling
3. 使用 loading.tsx 提供流式加载体验
4. 利用 generateStaticParams 预生成静态页面
这是我在实际项目中最喜欢的特性之一，希望对你有帮助！