Next.js App Router 入门指南

Next.js 的 App Router 是一个革命性的路由系统，让构建现代 Web 应用变得更加简单。

Server Components

默认情况下，App Router 中的组件都是 Server Components：

export default async function Page() {
  const data = await fetchData();
  return <div>{data.title}</div>;
}

布局系统

通过 layout.tsx 文件，我们可以创建嵌套布局：

export default function Layout({ children }: { children: React.ReactNode }) {
  return (
    <div className="container mx-auto">
      <nav>...</nav>
      {children}
    </div>
  );
}

总结

App Router 提供了更好的性能和开发体验，是构建现代 Web 应用的最佳选择。