SuperAPI AI 工具集

react-nextjs

前端与建站

查看项目

更新于 10-16 04:59

技能介绍

用途:为 Next.js 14+ App Router 开发提供最佳实践指引,覆盖组件模型、数据获取、缓存与 Vercel 优化。

主要能力与要点:

  1. 目录结构:给出 app/ 下 layout、page、loading、error、not-found、路由组、api 路由的推荐组织方式。
  2. 组件区分:默认使用 Server Component,可直接访问数据库;需要交互时用 'use client' 声明 Client Component。
  3. 避免请求瀑布:用 Promise.all 并行获取数据,或用 Promise 配合 Suspense 延迟非关键请求。
  4. 打包优化:避免 barrel 文件,改用直接路径导入;重组件用 next/dynamic 懒加载。
  5. Server Actions:用 'use server' 定义,配合 revalidatePath 更新缓存,可直接绑定到表单 action。
  6. 缓存策略:React cache 做请求去重;fetch 的 next.revalidate 控制重新验证;dynamic = 'force-static' 静态生成。
  7. 元数据:支持静态 metadata 与动态 generateMetadata。

适用场景:Next.js 14+ App Router 项目开发与重构。限制:资料仅提供实践建议与参考链接,未说明安装命令、价格或具体平台要求。