Next.js 13中如何构建进度条？原nprogress方案失效

Next.js 13的App Router不再兼容next/router的Router.eventsAPI，需要改用App Router专属的路由监听方式，具体实现步骤如下：

1. 确保依赖安装 #

如果还未安装NProgress，执行以下命令：

npm install nprogress
# 或
yarn add nprogress

2. 创建客户端进度条组件 #

新建components/NProgressBar.js（路径可自定义），内容如下：

'use client';

import { useEffect, useState } from 'react';
import { usePathname, useSearchParams } from 'next/navigation';
import NProgress from 'nprogress';
import 'nprogress/nprogress.css';

// 自定义进度条配置（可选）
NProgress.configure({
  showSpinner: false,
  trickleSpeed: 100,
  minimum: 0.1,
});

export default function NProgressBar() {
  const pathname = usePathname();
  const searchParams = useSearchParams();
  const [isPending, setIsPending] = useState(false);

  useEffect(() => {
    // 延迟启动进度条，避免快速路由切换的闪烁问题
    const timer = setTimeout(() => {
      setIsPending(true);
      if (isPending) NProgress.start();
    }, 80);

    // 路由切换完成，停止进度条
    return () => {
      clearTimeout(timer);
      NProgress.done();
      setIsPending(false);
    };
  }, [pathname, searchParams]);

  return null;
}

3. 在根布局中引入组件 #

修改app/layout.js，加入进度条组件：

import Header from '@/components/Header';
import './globals.css';
import NProgressBar from '@/components/NProgressBar';
import Providers from './Providers';

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <NProgressBar />
        <Providers>
          <Header />
          {children}
        </Providers>
      </body>
    </html>
  );
}

4. 清理无用代码 #

删除Providers.js中所有和next/router、Router.events相关的代码，App Router不再使用这些API。

原理说明 #

App Router通过usePathname和useSearchParams客户端钩子感知路由变化，当路径或查询参数更新时，useEffect会触发进度条的启动与停止。添加延迟定时器是为了避免短时间内路由切换导致进度条频繁闪烁，提升用户体验。

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