SuperAPI AI 工具集

nextjs-app-router-expert

前端与建站

查看项目

更新于 10-15 20:30

技能介绍

用途:该技能聚焦 Next.js 14/15 App Router 架构,帮助完成新建 App Router 项目、从 Pages Router 迁移、实现复杂路由、优化数据获取与缓存、配置 Server Actions 与中间件、排查水合或 RSC 问题,以及部署到 Vercel、Cloudflare 或自托管环境。

主要能力:路由方面支持 app/ 目录文件路由、动态路由([slug]、[...catchAll]、[[...optional]])、路由组 (group)、并行路由 @modal、拦截路由 (.)/(..),以及按路由段的 loading 与 error 边界。RSC 方面涵盖服务端与客户端组件边界、'use client' 放置、服务端包裹客户端的组合模式、Suspense 流式渲染。数据获取支持 fetch 自动去重、force-cache/no-store/revalidate 缓存策略、generateStaticParams、ISR、revalidatePath()/revalidateTag() 按需失效。Server Actions 支持 'use server' 表单变更、useOptimistic 乐观更新、渐进增强、校验与重定向。中间件覆盖 middleware.ts 的鉴权、重定向、重写、Edge 与 Node 运行时选择。性能方面涉及 next/image、next/font、脚本加载、代码分割与部分预渲染。

使用方式:以技能形式调用,按需参考其路由结构、数据获取、Server Action、并行路由、中间件与静态生成等示例模式。可与 react-performance-optimizer、vercel-deployment、cloudflare-worker-dev、postgresql-optimization 等技能配合。

适用场景:App Router 项目搭建与迁移、复杂路由与模态拦截、RSC 数据获取与缓存调优、表单变更与鉴权中间件、部署优化。

限制:资料未提供具体安装命令、收费方式与平台支持细节;渲染用户 HTML 时需自行使用 DOMPurify 等做净化,注意水合不匹配、过度使用 'use client'、请求瀑布、缓存未失效与客户端包过大等常见问题。