name: Next.js 14+ App Router Patterns description: 专家级框架，用于使用 Next.js 14+ App Router 构建现代 React 应用程序，包含 Server Components、Streaming、Server Actions 和改进的数据获取能力。

Next.js 14+ App Router Patterns

概览

Next.js 14+ App Router 是一个功能强大的 React 框架，包括 Server Components、Streaming、Server Actions 和改进的数据获取功能。App Router 使用基于文件的路由和嵌套布局，使得构建复杂应用程序更加容易。关键特性包括减少 JavaScript 包的 Server Components，提高性能的 Streaming，用于服务器端功能的 Server Actions，以及优化性能的改进缓存策略。

为什么这很重要

减少上市时间：Next.js 减少开发时间 30-40%
提高性能：Server Components 和 Streaming 提高性能
降低基础设施成本：边缘运行时和缓存降低运营成本
增强 SEO：服务器端渲染提高搜索引擎优化
提高开发体验：强大的特性增加开发人员生产力

核心概念

1. 基于文件的路由

目录基础路由：

app/：包含路由的 App Router 目录
page.tsx：路由页面组件
layout.tsx：包装子路由的布局组件
loading.tsx：Suspense 边界的加载 UI
error.tsx：错误边界 UI
not-found.tsx：404 页面
route.ts：API 路由处理器

2. 服务器组件与客户端组件

组件执行模型：

服务器组件（默认）：在服务器上渲染，不向客户端发送 JavaScript
客户端组件：在客户端渲染，可以使用钩子和浏览器 API
混合架构：结合服务器和客户端组件以获得最佳性能
组件组合：服务器组件可以导入和使用客户端组件

3. 数据获取

灵活的数据获取模式：

服务器组件：服务器组件直接访问数据库/API
fetch() API：内置缓存和重新验证
服务器操作：客户端组件调用的服务器端函数
流式传输：Suspense 的渐进式渲染
缓存：强制缓存、无存储和重新验证选项

4. 路由处理器

API 端点：

路由处理器：app 目录中的 API 路由
HTTP 方法：支持 GET、POST、PUT、DELETE、PATCH
动态路由：动态路由参数
中间件：请求/响应拦截
CORS：跨源资源共享支持

5. 服务器操作

服务器端变更：

表单处理：表单提交的服务器操作
变更：客户端组件的数据库变更
验证：使用 Zod 进行服务器端验证
重新验证：变更后的缓存失效
渐进增强：无需 JavaScript 即可工作

6. 流式传输和 Suspense

渐进式渲染：

Suspense：异步组件边界
流式传输：渐进式 HTML 和数据交付
加载状态：加载 UI 组件
错误边界：错误处理
渐进增强：优雅降级

7. 缓存策略

通过缓存优化：

force-cache：默认缓存策略
no-store：始终获取最新数据
revalidate：基于时间的重新验证
on-demand：手动缓存重新验证
Tags：基于标签的缓存失效

快速开始

初始化项目：创建带有 App Router 的 Next.js 项目
设置 TypeScript：以严格模式配置 TypeScript
创建布局：使用主题提供程序构建根布局
构建页面：使用服务器组件创建页面组件
添加客户端组件：使用客户端组件进行交互性操作
实现数据获取：在服务器组件中获取数据
添加流式传输：为渐进式渲染实现 Suspense
设置 API 路由：为 API 端点创建路由处理器
添加服务器操作：为变更实现服务器操作
配置缓存：设置适当的缓存策略

// app/layout.tsx - 根布局
import type { Metadata } from 'next'
import { Inter } from 'next/font/google'
import './globals.css'

const inter = Inter({ subsets: ['latin'] })

export const metadata: Metadata = {
  title: '我的应用程序',
  description: '一个 Next.js 应用程序',
}

export default function RootLayout({
  children
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body className={inter.className}>{children}</body>
    </html>
  )
}

生产检查清单

[ ] 配置 App Router 目录结构
[ ] 实施带有主题提供程序的根布局
[ ] 以严格模式配置 TypeScript
[ ] 默认使用服务器组件
[ ] 标记客户端组件为 ‘use client’
[ ] 使用适当的缓存进行数据获取
[ ] 使用 Suspense 边界进行流式传输
[ ] 实施加载状态
[ ] 配置错误边界
[ ] 使用适当的 HTTP 方法的 API 路由
[ ] 为变更实现服务器操作
[ ] 配置缓存策略
[ ] 实施缓存重新验证
[ ] 用于认证/授权的中间件
[ ] 配置安全头部
[ ] 优化性能（捆绑包大小，核心 Web 指标）
[ ] 验证可访问性（键盘导航，屏幕阅读器）
[ ] 优化 SEO（元数据，结构化数据）

反模式

过度使用客户端组件：不必要地使用客户端组件会增加捆绑包大小
缓存策略不当：不使用适当的缓存策略会导致性能问题
忽视 SEO：不优化服务器端渲染会损害 SEO
安全问题：不实施安全措施会暴露漏洞
性能问题：不优化捆绑包大小和渲染会导致加载时间慢
可访问性问题：不考虑可访问性会限制用户群
复杂的数据获取：过于复杂的数据获取逻辑难以维护
缺少错误处理：不实现适当的错误处理会导致糟糕的用户体验
没有缓存策略：不规划缓存会导致性能问题
糟糕的路由结构：无组织的目录结构使得维护困难

集成点

React：用于组件和钩子的核心 React 库
TypeScript：类型安全和接口
Tailwind CSS：样式框架
Zod：模式验证
Prisma：数据库 ORM
Vercel：部署平台
react-best-practices 用于 React 模式
form-handling 用于表单模式
api-design 用于 API 设计
error-handling 用于错误处理

进一步阅读

Next.js Documentation - 官方 Next.js 文档
App Router - App Router 指南
Server Components - 服务器组件指南
Server Actions - 服务器操作指南
Data Fetching - 数据获取模式
Streaming - 流式传输和 Suspense
Caching - 缓存策略
Web Vitals - 核心 Web 指标性能指标