Next.js App Router 入门指南

什么是 App Router？

Next.js 13 引入了全新的 App Router，基于 React Server Components 构建。相比传统的 Pages Router，App Router 提供了更灵活的路由和布局系统。

核心概念

1. 文件系统路由

在 app/ 目录下，每个文件夹代表一个路由段。特殊文件名有特定用途：

• page.tsx — 路由页面
• layout.tsx — 共享布局
• loading.tsx — 加载状态
• error.tsx — 错误处理

2. 服务端组件

App Router 中的组件默认是服务端组件（Server Components），它们在服务器上渲染，不会增加客户端 JavaScript 体积。

tsx
// 这是一个服务端组件 — 可以直接访问数据库
async function PostList() {
  const posts = await db.posts.findMany();
  return (
    <ul>
      {posts.map(post => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
}

3. 客户端组件

需要交互性的组件使用 "use client" 指令：

tsx
"use client";

import { useState } from "react";

function LikeButton() {
  const [likes, setLikes] = useState(0);
  return <button onClick={() => setLikes(l => l + 1)}>❤️ {likes}</button>;
}

数据获取

App Router 使用原生 fetch API 进行数据获取，并支持自动缓存和重新验证：

typescript
async function getData() {
  const res = await fetch("https://api.example.com/data", {
    next: { revalidate: 3600 }, // 每小时重新验证
  });
  return res.json();
}

总结

App Router 是 Next.js 的未来方向，它利用 React Server Components 的能力，提供了更好的性能和开发体验。如果你正在开始一个新项目，强烈推荐使用 App Router。