Next.js App Router 完全指南

Next.js 14 的 App Router 带来了全新的开发范式。本文将深入探讨其核心概念和最佳实践。

目录结构

App Router 使用基于文件系统的路由：

app/
├── layout.tsx          # 根布局
├── page.tsx            # 首页
├── posts/
│   ├── page.tsx        # /posts
│   └── [slug]/
│       └── page.tsx    # /posts/:slug
└── api/
    └── posts/
        └── route.ts    # API 路由

服务端组件 vs 客户端组件

默认情况下，App Router 中的组件都是服务端组件：

// 这是一个服务端组件（默认）
async function PostList() {
  const posts = await fetchPosts(); // 直接在服务端获取数据
  
  return (
    <ul>
      {posts.map(post => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
}

需要交互时，使用 'use client' 指令：

'use client';

import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);
  
  return (
    <button onClick={() => setCount(c => c + 1)}>
      Count: {count}
    </button>
  );
}

数据获取

App Router 简化了数据获取方式：

// 直接在组件中 async/await
async function Page() {
  const data = await fetch('https://api.example.com/data', {
    next: { revalidate: 3600 } // ISR: 每小时重新验证
  });
  
  return <div>{/* 渲染数据 */}</div>;
}

流式渲染与 Suspense

利用 React Suspense 实现流式加载：

import { Suspense } from 'react';

export default function Page() {
  return (
    <div>
      <h1>我的页面</h1>
      <Suspense fallback={<Loading />}>
        <SlowComponent />
      </Suspense>
    </div>
  );
}

最佳实践

尽量使用服务端组件 - 减少客户端 JavaScript
合理使用缓存 - 利用 revalidate 控制数据新鲜度
组件组合 - 将客户端组件作为叶子节点
错误处理 - 使用 error.tsx 和 not-found.tsx

总结

App Router 代表了 React 全栈开发的未来方向。虽然学习曲线稍陡，但掌握后能显著提升开发效率和应用性能。

下一篇文章我们将探讨如何在 App Router 中实现高级动画效果，敬请期待！