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 博客文章列表

}
0

2. 布局 (Layouts)

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

// app/layout.tsx
export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    
      
        导航栏

        {children}
        页脚

      
    
  )
}
0

3. 动态路由

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

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

}
0

最佳实践

使用服务端组件 - 默认就是服务端组件，减少客户端 JavaScript

数据获取 - 在服务端组件中直接获取数据

加载状态 - 使用 loading.tsx 文件

错误处理 - 使用 error.tsx 文件

总结

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