Next.js App Router 入门指南

Next.js 13 引入的 App Router 代表了 React 应用的未来。

什么是 App Router

App Router 是 Next.js 的新路由系统，基于 React Server Components 构建。它提供了：

文件系统路由 - 通过文件夹结构定义路由
服务端组件 - 默认在服务端渲染
布局系统 - 共享 UI 组件
流式渲染 - 渐进式页面加载

核心概念

1. 页面 (Pages)

在 app 目录下创建 page.tsx 文件：

// app/blog/page.tsx
export default function BlogPage() {
  return <h1>博客文章列表</h1>
}

2. 布局 (Layouts)

使用 layout.tsx 定义共享布局：

// app/layout.tsx
export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html>
      <body>
        <nav>导航栏</nav>
        {children}
        <footer>页脚</footer>
      </body>
    </html>
  )
}

3. 动态路由

使用方括号创建动态路由：

// app/blog/[slug]/page.tsx
export default async function BlogPost({
  params,
}: {
  params: Promise<{ slug: string }>
}) {
  const { slug } = await params
  return <h1>文章: {slug}</h1>
}

最佳实践

使用服务端组件 - 默认就是服务端组件，减少客户端 JavaScript
数据获取 - 在服务端组件中直接获取数据
加载状态 - 使用 loading.tsx 文件
错误处理 - 使用 error.tsx 文件

总结

App Router 是 Next.js 的推荐方式，它简化了开发流程，提高了性能。