modern-best-practice-nextjs

此技能为开发现代 Next.js Web 应用程序提供了全面的框架，特别专注于 App Router 架构。专为需要构建可扩展、SEO 友好且易于维护的 React 应用程序的软件工程师与全栈开发人员设计。本指南强调现代性能模式，例如优先使用服务器组件 (Server Components) 以减少客户端 JavaScript，利用 Server Actions 进行安全的数据变更，以及实施绕过过时 useEffect 模式的高效数据获取策略。通过整合此技能，开发人员可确保其代码库遵守有关目录结构、路由组与布局组合的行业标准规范。这对于从 Pages Router 迁移的团队，或是希望标准化新 Next.js 项目以提升开发体验与运行时性能的团队特别有用。

• 实现 App Router 模式，包括布局嵌套、路由组以及加载与错误边界状态。

• 深度整合 React 服务器组件 (RSC) 以优化页面初始加载并减小客户端包大小。

• 使用 Server Actions 及 React Hook (如 useActionState) 的安全且声明式的数据变更模式。

• 实现 Metadata API 以确保在动态与静态路由间具备强大的 SEO 与内容可发现性。

• 策略性使用 Suspense 边界来有效处理异步 UI 转换。

• 优先使用原生 Next.js 原语；避免在 useEffect 或客户端 fetch 调用内部进行手动数据获取。

• 尽可能优先使用静态元数据而非动态元数据，以降低服务器负载，维持高质量代码。

• 使用如 loading.tsx 与 error.tsx 的诊断模式，提升路由级别的用户体验与稳健性。

• 建议用于 Next.js 13+ 并使用 App Router 的项目；由于框架更新迅速，请务必随时参考最新官方文档。

• 输入：业务逻辑需求、UI/UX 规格与 API 数据结构。输出：干净、高性能且具备类型安全的 Next.js 源代码。