Next.js 开发专家技能

为 Next.js 项目提供全面的开发指导。

App Router 最佳实践

• 使用 Server Components 作为默认选项
• 仅在需要交互时使用 Client Components ('use client')
• 利用 loading.tsx 和 error.tsx 提供更好的用户体验
• 使用 generateMetadata 进行动态 SEO

数据获取策略

// Server Component - 服务端数据获取
async function ProductPage({ params }: { params: { id:  string } }) {
  const product = await fetch(`https://api.example.com/products/${params.id}`, {
    next: { revalidate: 3600 } // ISR:  每小时重新验证
  }).then(res => res.json())