Next.js 13中如何实现类似NProgress的路由切换进度条过渡？

在Next.js 13及以后的App Router体系中，原有的next/router里的router.events已被废弃，next/navigation导出的useRouter也不再包含events属性，直接导入next/router的Router对象也无法在App Router环境下正常工作——这是因为新旧路由系统的设计逻辑完全不同，旧的事件机制不适用于新的App Router。

下面是两种可行的替代方案：

方案一：通过usePathname和useSearchParams监听路由变化 #

利用这两个客户端钩子的响应式特性，当路由的路径或查询参数变化时，触发进度条的启动与停止：

'use client';
import { useEffect } from 'react';
import { usePathname, useSearchParams } from 'next/navigation';
import NProgress from 'nprogress';

export default function RootLayout({ children }) {
  const pathname = usePathname();
  const searchParams = useSearchParams();

  useEffect(() => {
    NProgress.start();
    // 路由切换完成后停止进度条，可根据实际调整延迟时间
    const completeTimer = setTimeout(() => {
      NProgress.done();
    }, 100);
    
    return () => {
      clearTimeout(completeTimer);
      NProgress.remove();
    };
  }, [pathname, searchParams]);

  return (
    <html lang="zh-CN">
      <body>{children}</body>
    </html>
  );
}

方案二：使用NavigationEvents组件（Next.js 13.4+） #

Next.js 13.4及以上版本提供了NavigationEvents组件，能更精准地监听路由切换的各个阶段，效果最接近旧版的router.events：

'use client';
import { NavigationEvents } from 'next/navigation';
import NProgress from 'nprogress';

export default function TransitionWrapper({ children }) {
  return (
    <>
      <NavigationEvents
        onNavigateStart={() => NProgress.start()}
        onNavigateComplete={() => NProgress.done()}
        onNavigateError={() => {
          NProgress.done();
          NProgress.remove();
        }}
      />
      {children}
    </>
  );
}

注意事项 #

1. 所有使用上述客户端钩子或NavigationEvents的组件，必须添加'use client';指令，因为App Router默认是服务器组件，无法直接使用客户端API。
2. 确保已安装nprogress依赖：npm install nprogress，并在全局样式文件（如globals.css）中引入其样式：

@import 'nprogress/nprogress.css';

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