Next.js App Router 入门指南

什么是 App Router？

App Router 是 Next.js 基于 React Server Components 构建的新一代路由系统。它在 Next.js 13 中引入，并从 Next.js 14 开始成为构建应用的首选方式。

与传统的 Pages Router 不同，App Router 采用基于文件夹的方式，每个路由段对应一个文件夹，实际页面内容存放在名为 page.tsx 的特殊文件中。

基于文件系统的路由

在 App Router 中，您通过在 app 目录中添加文件夹和文件来创建路由：

app/
  page.tsx         → /
  about/
    page.tsx       → /about
  blog/
    page.tsx       → /blog
    [slug]/
      page.tsx     → /blog/:slug

这种约定让您一眼就能理解应用的路由结构。

默认使用服务端组件

App Router 最大的变化之一是组件默认是 React Server Components。这意味着：

组件在服务端渲染，而非浏览器中。

您可以直接在组件中使用 async/await 来获取数据。

发送到客户端的 JavaScript 更少，性能更佳。

// 这是一个服务端组件——在服务端运行
export default async function Page() {
  const data = await fetch("https://api.example.com/posts");
  const posts = await data.json();
return ;
}

布局与模板

App Router 引入了可在导航过程中保持状态的共享布局：

// app/layout.tsx
export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    
      
        我的应用
        {children}
      
    
  );
}

布局会包裹子路由，并且在导航时不会重新渲染，使页面切换感觉更流畅。

开始使用

要创建一个使用 App Router 的新 Next.js 项目：

npx create-next-app@latest my-app

在提示时选择 App Router 选项。祝你编码愉快！