Next JS 13 App目录下进度条完全失效问题求助

你的问题核心是Next.js 13 App Router不再兼容Pages Router的next/router路由事件体系，原来的监听方式自然失效。以下是直接可用的修复步骤：

关键原因 #

App Router默认使用服务器组件，且路由系统改为next/navigation提供的API，next/router仅适用于旧版Pages Router，无法在App目录中触发路由事件。

修复步骤 #

1. 保留依赖 #

无需更换nprogress，确保已安装：

npm install nprogress
# 或
yarn add nprogress

2. 修改RootLayout代码 #

将你的layout.jsx改成客户端组件（添加'use client'指令），并使用App Router的useRouter监听导航事件：

'use client'; // 必须添加，转为客户端组件才能用hooks

import { useEffect } from 'react';
import { useRouter } from 'next/navigation';
import NProgress from 'nprogress';
import 'nprogress/nprogress.css';
import { ChakraProvider } from '@chakra-ui/react';
import wrapper from '../your-redux-wrapper-path'; // 替换为你的Redux wrapper实际路径

function RootLayout({ children }) {
  const router = useRouter();

  useEffect(() => {
    // 定义进度条触发函数
    const startProgress = () => NProgress.start();
    const stopProgress = () => NProgress.done();

    // 监听路由事件
    router.events.on('routeChangeStart', startProgress);
    router.events.on('routeChangeComplete', stopProgress);
    router.events.on('routeChangeError', stopProgress);

    // 组件卸载时清理监听，避免内存泄漏
    return () => {
      router.events.off('routeChangeStart', startProgress);
      router.events.off('routeChangeComplete', stopProgress);
      router.events.off('routeChangeError', stopProgress);
    };
  }, [router]);

  return (
    <html>
      <head />
      <body className="max-w-7xl mx-auto">
        <ChakraProvider>{children}</ChakraProvider>
      </body>
    </html>
  );
}

export default wrapper.withRedux(RootLayout);

注意事项 #

• 'use client'是必须的：App Router默认组件为服务器组件，无法使用useRouter等客户端hooks，添加该指令后组件会转为客户端组件。
• 清理监听：务必在useEffect的返回函数中移除事件监听，防止组件卸载后残留事件导致内存泄漏。
• 样式验证：确认nprogress/nprogress.css正确导入，否则进度条会无样式显示。

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