如何在Next.js App Router中预取动态路由的分块资源？

要实现只预取动态路由的JS/CSS资源分块，而不加载页面实际数据，关键是用动态路由的通用占位符路径调用router.prefetch，而非具体的slug值。

具体实现步骤 #

1. 首先在客户端组件中导入useRouter钩子：

'use client';
import { useRouter } from 'next/navigation';

2. 调用router.prefetch时，传入与路由文件结构匹配的通用路径：

const router = useRouter();

// 仅预取blog/[slug]页面的资源分块，不触发数据获取
router.prefetch('/blog/[slug]');

为什么这样有效？ #

当你传入带[slug]占位符的路径时，Next.js会识别这是动态路由的通用模板，只会下载该路由对应的组件代码分块（JS/CSS），不会执行page.tsx里的数据获取逻辑（比如fetch请求、generateStaticParams或服务器端数据方法）。

注意事项 #

• 该操作仅能在客户端组件中执行，因为useRouter是客户端专属钩子
• 如果是多层动态路由（比如app/blog/[category]/[slug]/page.tsx），则传入对应的通用路径：/blog/[category]/[slug]
• 路径必须严格匹配app目录下的路由结构，包括嵌套层级

内容的提问来源于stack exchange，提问作者A.A