SuperAPI AI 工具集

nextjs-project-manager

前端与建站

查看项目

更新于 10-15 21:36

技能介绍

用途:该技能用于在 Next.js 14+ 的 App Router 下构建生产级应用,适用于路由、组件、Server Actions、数据获取及各类 Next.js 专属模式的开发与调试。

主要能力:以 App Router 为核心,路由放在 src/app/ 目录,用 page.tsx 定义路由、layout.tsx 定义共享布局,可用 (group) 路由组组织代码。默认使用服务端组件,可直接 async/await、访问数据库或后端,且发送到客户端的 JS 更少;需要状态、副作用、事件处理、浏览器 API 或使用 hooks 的第三方库时,才加 "use client" 切换为客户端组件。支持 Server Actions 处理表单提交与数据变更,配合 revalidatePath()、redirect() 使用。

常见模式:提供路由结构示例、布局、loading.tsx 加载态、error.tsx 错误边界、metadata 元数据、API 路由(route.ts 中的 GET/POST)、动态路由 [id] 与 generateStaticParams、middleware.ts 中间件及 matcher 配置。环境变量在服务端直接读 process.env,客户端需以 NEXT_PUBLIC_ 前缀。

最佳实践与优化:默认服务端组件、仅在必要时加 "use client"、用 Server Actions 做变更、实现 loading 与 error 文件、用路由组组织、为页面加 metadata、使用 TypeScript、用中间件做鉴权、用 next/image 优化图片、对大组件动态导入;性能上可用 Suspense、流式渲染、next/font、ISR 与 fetch 缓存选项。

调试提示:涵盖 hydration 错误、缺失 "use client"、无法访问浏览器 API、数据不更新需 revalidate、构建错误等。

限制:资料未提供该技能的安装命令、收费方式、支持平台或具体版本要求,暂未提供。