Next.js 14 App Router 入门指南

什么是 App Router？

Next.js 14 的 App Router 是基于 React Server Components 构建的全新路由系统。它使用 app/ 目录作为路由的根目录，通过文件系统来定义路由。

核心概念

1. 文件路由：app/page.tsx 映射到 /，app/about/page.tsx 映射到 /about
2. 布局组件：layout.tsx 提供跨页面共享的 UI
3. 服务端组件：默认所有组件都是服务端组件，在服务端渲染

代码示例

// app/page.tsx
export default function HomePage() {
  return <h1>Hello, Next.js!</h1>
}

动态路由

使用方括号语法 [slug] 创建动态路由：

// app/posts/[slug]/page.tsx
interface Props {
  params: { slug: string }
}

export default function PostPage({ params }: Props) {
  return <article>文章: {params.slug}</article>
}

为什么选择 App Router？

• 🚀 更好的性能：自动代码分割、流式渲染
• 🎯 简化的数据获取：直接在组件内使用 async/await
• 📐 嵌套布局：灵活的布局组合
• 🔒 内置 SEO：通过 generateMetadata 轻松管理元数据

小结

App Router 是 Next.js 的未来方向，虽然学习曲线比 Pages Router 稍陡，但带来的性能和开发体验提升是值得的。