SuperAPI AI 工具集

nextjs-navigation

前端与建站

查看项目

更新于 10-15 21:53

技能介绍

用途:围绕 Next.js App Router 的导航模式、预取行为与导航相关优化提供指导。

主要能力:一是 Link 预取配置。prefetch={false} 关闭全部预取(含 hover);prefetch={undefined} 仅预取静态路由;prefetch={true} 同时预取静态与动态路由。资源消耗大的目标页或不常导航时可关闭,频繁访问的动态路由可用 true 提升感知性能。二是 Suspense 与搜索参数。仅搜索参数变化时,同页导航不会重新触发 Suspense,筛选或分页时加载态不显示;可在 Suspense 上加包含变化搜索参数的 key,强制卸载重挂并显示 fallback。三是类型安全,使用 PageProps 辅助类型为 page 组件的 params 与 searchParams 提供类型。四是客户端状态保留,在 next.config.js 启用 experimental.cacheComponents 后,Next.js 使用 React 的 Activity 组件在客户端导航中保留组件状态,表单输入、滚动位置与本地状态在离开再返回同一路由时保持。

限制:cacheComponents 为实验性特性;动态路由默认不被预取;文档未提供兼容版本、性能数据与完整配置细节。