#Next.js App Router 完全指南
Next.js 13 引入的 App Router 是一次重大更新，它基于 React Server Components，带来了全新的开发体验。
##App Router vs Pages Router
| 特性 | Pages Router | App Router |
|---|---|---|
| 文件路由 | pages/click to copy 目录 | app/click to copy 目录 |
| 布局 | 需要自定义 | 内置 Layout 系统 |
| 数据获取 | getStaticPropsclick to copy 等 | async/awaitclick to copy 直接使用 |
| Server Components | 不支持 | 原生支持 |
| Streaming | 有限支持 | 完整支持 |
##核心概念
###文件路由结构
app/
├── layout.tsx # 根布局
├── page.tsx # 首页
├── about/
│ └── page.tsx # /about
├── blog/
│ ├── page.tsx # /blog
│ └── [slug]/
│ └── page.tsx # /blog/:slug
└── api/
└── route.ts # API 路由
click to copy
###布局系统
>hljs typescript.0 lines
// app/layout.tsx
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="zh-CN">
<body>
<Header />
{children}
<Footer />
</body>
</html>
);
}
// app/about/layout.tsx
export default function AboutLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<div className="about-layout">
<Sidebar />
<main>{children}</main>
</div>
);
}
###数据获取
>hljs typescript.0 lines
// app/blog/page.tsx
async function getPosts() {
const res = await fetch('https://api.example.com/posts', {
next: { revalidate: 3600 }, // ISR，每小时重新验证
});
return res.json();
}
export default async function BlogPage() {
const posts = await getPosts();
return (
<div>
{posts.map((post) => (
<PostCard key={post.id} post={post} />
))}
</div>
);
}
##Server Components vs Client Components
###Server Components（默认）
>hljs typescript.0 lines
// ✅ 服务端组件
export default async function ServerComponent() {
const data = await fetch('https://api.example.com/data');
return <div>{data.title}</div>;
}
###Client Components
>hljs typescript.0 lines
'use client';
import { useState } from 'react';
export default function ClientComponent() {
const [count, setCount] = useState(0);
return (
<button onClick={() => setCount(count + 1)}>
点击了 {count} 次
</button>
);
}
##最佳实践
###1. 默认使用 Server Components
- ●减少客户端 JavaScript 体积
- ●直接访问数据库和 API
- ●提升首屏加载速度
###2. 按需使用 Client Components
- ●交互性组件（按钮、表单）
- ●浏览器 API（localStorage、window）
- ●第三方库（需要 React hooks）
###3. 使用 Server Actions 处理表单
>hljs typescript.0 lines
'use server';
export async function createPost(formData: FormData) {
const title = formData.get('title');
// 保存到数据库
redirect('/blog');
}
// 使用
<form action={createPost}>
<input name="title" />
<button type="submit">提交</button>
</form>
##性能优化
###图片优化
>hljs typescript.0 lines
import Image from 'next/image';
<Image
src="/hero.jpg"
alt="Hero"
width={1200}
height={630}
priority // 首屏图片
/>
###字体优化
>hljs typescript.0 lines
import { Inter } from 'next/font/google';
const inter = Inter({ subsets: ['latin'] });
###代码分割
- ●使用动态导入
dynamic()click to copy - ●路由级别的自动代码分割
- ●按需加载组件
##总结
Next.js App Router 代表了 React 开发的未来方向。掌握它，能让你构建出更快、更好的 Web 应用。
"优秀的框架不是限制你的创造力，而是让好的实践变得简单。"