Next.js App Router 实战教程

Next.js 13 引入了全新的 App Router，基于 React Server Components 构建，提供了更好的开发体验和性能。

新特性

1. 基于文件系统的路由 - 更直观的路由组织
2. Layouts - 共享UI的持久化
3. Server Components - 默认支持
4. Streaming - 更好的加载性能
5. Data Fetching - 简化的数据获取

项目结构

app/
├── layout.tsx          # 根布局
├── page.tsx            # 首页
├── about/
│   └── page.tsx        # /about
├── blog/
│   ├── page.tsx        # /blog
│   └── [slug]/
│       └── page.tsx    # /blog/[slug]
└── api/
    └── posts/
        └── route.ts    # /api/posts

数据获取

// App Router 中的数据获取
async function BlogList() {
  const posts = await db.post.findMany();
  return (
    <div>
      {posts.map(post => (
        <PostCard key={post.id} post={post} />
      ))}
    </div>
  );
}

总结

App Router 是 Next.js 的未来，掌握它将让你的开发效率大幅提升。