Next.js 14 App Router 入门指南
latte-girl·
Next.jsReact教程
什么是 App Router？
Next.js 14 引入了全新的 App Router，这是一个基于 React Server Components 的路由系统。
核心概念
1. 文件系统路由
app/
├── page.tsx # /
├── about/
│ └── page.tsx # /about
└── posts/
├── page.tsx # /posts
└── [slug]/
└── page.tsx # /posts/:slug
2. 布局系统
// app/layout.tsx
export default function RootLayout({ children }) {
return (
<html>
<body>{children}</body>
</html>
)
}3. 服务端组件
默认情况下，App Router 中的组件都是服务端组件：
// 这是一个服务端组件
async function PostList() {
const posts = await fetchPosts() // 直接在组件中获取数据
return <ul>{posts.map(p => <li>{p.title}</li>)}</ul>
}为什么选择 App Router？
- 更好的性能 - 服务端组件减少客户端 JS
- 更简单的数据获取 - 直接 await
- 流式渲染 - 渐进式加载
