Next.js 14 App Router 完全指南

App Router 简介

Next.js 14 引入了全新的 App Router，基于 React Server Components 构建，提供了更强大的功能和更好的性能。

核心概念

1. Server Components

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

// app/page.tsx
export default function Page() {
  return <h1>Hello, Server Component!</h1>
}

2. Client Components

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

'use client'

import { useState } from 'react'

export default function Counter() {
  const [count, setCount] = useState(0)
  return <button onClick={() => setCount(count + 1)}>{count}</button>
}

3. Server Actions

直接在服务器端执行的函数：

'use server'

export async function createPost(formData: FormData) {
  const title = formData.get('title')
  // 保存到数据库
}

文件结构

app/
├── layout.tsx      # 根布局
├── page.tsx        # 首页
├── blog/
│   ├── layout.tsx  # 博客布局
│   └── page.tsx    # 博客列表
└── api/
    └── posts/
        └── route.ts # API 路由

性能优化

1. 使用 Server Components：减少客户端 JavaScript
2. 流式渲染：使用 Suspense 实现
3. 图片优化：使用 next/image
4. 字体优化：使用 next/font

最佳实践

• 尽可能使用 Server Components
• 合理划分 Client/Server 边界
• 利用 Parallel Routes 实现复杂布局
• 使用 Intercepting Routes 优化用户体验