深入了解 Next.js 13+ 的 App Router 架构，学习如何构建现代化的 React 应用
Next.js App Router 入门指南
Next.js 13 引入了全新的 App Router，这是一个基于 React Server Components 的路由系统，为开发者带来了更强大的功能和更好的性能。
什么是 App Router？
App Router 是 Next.js 的新一代路由系统，它使用 `app` 目录来定义路由，取代了传统的 `pages` 目录。
主要特性
- **服务端组件**：默认情况下，所有组件都是服务端组件
- **嵌套布局**：支持共享布局，减少重复代码
- **流式渲染**：支持 Suspense 和流式 HTML
- **数据获取**：简化的数据获取方式
目录结构
app/
├── layout.tsx # 根布局
├── page.tsx # 首页
├── about/
│ └── page.tsx # /about 页面
└── blog/
├── layout.tsx # 博客布局
├── page.tsx # /blog 页面
└── [slug]/
└── page.tsx # 动态路由
创建第一个页面
在 `app` 目录下创建 `page.tsx` 文件：
export default function HomePage() {
return (
<main>
<h1>欢迎来到我的网站</h1>
<p>这是使用 App Router 构建的页面</p>
</main>
);
}
布局组件
布局组件可以在多个页面之间共享 UI：
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="zh-CN">
<body>
<nav>导航栏</nav>
{children}
<footer>页脚</footer>
</body>
</html>
);
}
数据获取
在 App Router 中，你可以直接在组件中使用 async/await：
async function getData() {
const res = await fetch('https://api.example.com/data');
return res.json();
}
export default async function Page() {
const data = await getData();
return <div>{data.title}</div>;
}
总结
App Router 代表了 Next.js 的未来发展方向，它提供了更好的性能、更灵活的布局系统和更简单的数据获取方式。如果你正在开始一个新项目，强烈建议使用 App Router。
