nextjs-best-practices

# Next.js 最佳实践 > Next.js App Router 开发原则。 --- ## 1. 服务端组件 vs 客户端组件 ### 决策树 是否需要...? │ ├── useState, useEffect, 事件处理程序 │ └── 客户端组件 ('use client') │ ├── 直接数据获取，无交互性 │ └── 服务端组件 (默认) │ └── 两者都需要? └── 拆分：服务端父组件 + 客户端子组件 ### 默认建议 | 类型 | 用途 | |------|-----| | **服务端** | 数据获取、布局、静态内容 | | **客户端** | 表单、按钮、交互式 UI | --- ## 2. 数据获取模式 ### 获取策略 | 模式 | 用途 | |---------|-----| | **默认** | 静态（构建时缓存） | | **Revalidate** | ISR（基于时间的刷新） | | **No-store** | 动态（每次请求） | ### 数据流 | 来源 | 模式 | |--------|---------| | 数据库 | 服务端组件获取 | | API | 使用缓存的 fetch | | 用户输入 | 客户端状态 + 服务端操作 | --- ## 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 运行时 --- ## 5. 性能原则 ### 图片优化 - 使用 next/image 组件 - 为首屏内容设置 priority - 提供模糊占位符 - 使用响应式尺寸 ### 包优化 - 对大型组件使用动态导入 - 基于路由的代码拆分（自动） - 使用 bundle analyzer 进行分析 --- ## 6. 元数据 ### 静态 vs 动态 | 类型 | 用途 | |------|-----| | 静态导出 | 固定元数据 | | generateMetadata | 路由动态元数据 | ### 核心标签 - title (50-60 字符) - description (150-160 字符) - Open Graph 图片 - 规范 URL (Canonical URL) --- ## 7. 缓存策略 ### 缓存层 | 层级 | 控制方式 | |-------|---------| | 请求 | fetch 选项 | | 数据 | revalidate/tags | | 完整路由 | 路由配置 | ### 重新验证 | 方法 | 用途 | |--------|-----| | 基于时间 | `reval