关于
Next.js App Router 核心原则。服务端组件、数据获取、路由模式的最佳实践指南。
name: nextjs-best-practices description: "Next.js App Router 原则。服务端组件、数据获取、路由模式。" risk: unknown source: community date_added: "2026-02-27"
Next.js 最佳实践
Next.js App Router 开发原则。
1. 服务端 vs 客户端组件
决策树
需要...?
│
├── useState、useEffect、事件处理器
│ └── 客户端组件 ('use client')
│
├── 直接数据获取，无交互
│ └── 服务端组件（默认）
│
└── 两者都需要？
└── 拆分：服务端父组件 + 客户端子组件
默认规则
| 类型 | 用途 | |------|-----| | 服务端 | 数据获取、布局、静态内容 | | 客户端 | 表单、按钮、交互式 UI |
2. 数据获取模式
Fetch 策略
| 模式 | 用途 | |---------|-----| | 默认 | 静态（构建时缓存） | | Revalidate | ISR（基于时间刷新） | | No-store | 动态（每次请求） |
数据流
| 来源 | 模式 | |--------|---------| | 数据库 | 服务端组件 fetch | | API | 带缓存的 fetch | | 用户输入 | 客户端状态 + server action |
3. 路由原则
文件约定
| 文件 | 用途 |
|------|---------|
| page.tsx | 路由 UI |
| layout.tsx | 共享布局 |
| loading.tsx | 加载状态 |
| error.tsx | 错误边界 |
| not-found.tsx | 404 页面 |
路由组织
| 模式 | 用途 |
|---------|-----|
| 路由组 (name) | 不影响 URL 的组织 |
| 并行路由 @slot | 同级多页面 |
| 拦截路由 (.) | 模态覆盖层 |
4. API 路由
路由处理器
| 方法 | 用途 | |--------|-----| | GET | 读取数据 | | POST | 创建数据 | | PUT/PATCH | 更新数据 | | DELETE | 删除数据 |
最佳实践
- 使用 Zod 验证输入
- 返回正确的状态码
- 优雅地处理错误
- 尽可能使用 Edge runtime
5. 性能原则
图片优化
- 使用 next/image 组件
- 为首屏内容设置 priority
- 提供模糊占位符
- 使用响应式 sizes
包优化
- 重型组件使用动态导入
- 基于路由的代码分割（自动）
- 使用 bundle analyzer 分析
6. 元数据
静态 vs 动态
| 类型 | 用途 | |------|-----| | 静态导出 | 固定元数据 | | generateMetadata | 每路由动态 |
必要标签
- title（50-60 字符）
- description（150-160 字符）
- Open Graph 图片
- Canonical URL
7. 缓存策略
缓存层
| 层级 | 控制 | |------|------| | 请求记忆化 | React cache() | | 数据缓存 | fetch 选项 | | 完整路由缓存 | 静态/动态渲染 | | 路由器缓存 | 客户端导航 |