Nextjs Best Practices

Next.js 最佳实践

Next.js App Router 开发原则。

1. 服务端组件 vs 客户端组件

决策树

Does it need...?
│
├── useState, useEffect, event handlers
│   └── Client Component ('use client')
│
├── Direct data fetching, no interactivity
│   └── Server Component (default)
│
└── Both? 
    └── Split: Server parent + Client child

默认选择

2. 数据获取模式

获取策略

数据流

3. 路由原则

文件约定

路由组织

4. API 路由

路由处理器

最佳实践

• 使用 Zod 验证输入
• 返回正确的状态码
• 优雅地处理错误
• 尽可能使用 Edge 运行时

5. 性能原则

图片优化

• 使用 next/image 组件
• 为首屏图片设置 priority
• 提供模糊占位符
• 使用响应式尺寸

包体积优化

• 对重型组件使用动态导入
• 基于路由的代码分割（自动）
• 使用 bundle analyzer 分析

6. 元数据

静态 vs 动态

必要标签

• title（50-60 字符）
• description（150-160 字符）
• Open Graph 图片
• Canonical URL

7. 缓存策略

缓存层级

重新验证

8. Server Actions

使用场景

• 表单提交
• 数据变更
• 触发重新验证

最佳实践

• 使用 'use server' 标记
• 验证所有输入
• 返回类型化的响应
• 处理错误

9. 反模式

10. 项目结构

app/
├── (marketing)/     # Route group
│   └── page.tsx
├── (dashboard)/
│   ├── layout.tsx   # Dashboard layout
│   └── page.tsx
├── api/
│   └── [resource]/
│       └── route.ts
└── components/
    └── ui/

记住： 服务端组件作为默认选择是有原因的。从服务端组件开始，仅在需要时添加客户端组件。

适用场景

本技能适用于执行概述中描述的工作流或操作。

限制

• 仅当任务明确匹配上述范围时使用本技能。
• 不要将输出视为环境特定验证、测试或专家审查的替代品。
• 如果缺少必要的输入、权限、安全边界或成功标准，请停下来请求澄清。