Next.js 13 页面跳转进度条实现教程 - 使用 nprogress 库

在 Next.js 13 中，可以使用 'next/router' 模块中的 'useRouter' 钩子函数来监听路由变化，并且使用 'nprogress' 库来实现进度条效果。

首先安装 'nprogress' 库：

npm install nprogress

然后在需要添加进度条的页面中使用以下代码：

import { useEffect } from 'react';
import { useRouter } from 'next/router';
import NProgress from 'nprogress';
import 'nprogress/nprogress.css';

const Page = () => {
  const router = useRouter();

  useEffect(() => {
    const handleStart = () => {
      NProgress.start();
    };

    const handleComplete = () => {
      NProgress.done();
    };

    router.events.on('routeChangeStart', handleStart);
    router.events.on('routeChangeComplete', handleComplete);
    router.events.on('routeChangeError', handleComplete);

    return () => {
      router.events.off('routeChangeStart', handleStart);
      router.events.off('routeChangeComplete', handleComplete);
      router.events.off('routeChangeError', handleComplete);
    };
  }, [router]);

  return (
    <div>
      {/* 页面内容 */}
    </div>
  );
};

export default Page;

上面的代码中，我们使用 'useRouter' 钩子函数获取当前页面的路由对象，然后使用 'useEffect' 钩子函数在组件挂载和卸载时注册和注销路由事件监听器。

在路由事件触发时，我们使用 'NProgress' 的 'start' 和 'done' 方法来控制进度条的显示和隐藏。

最后在页面中渲染需要添加进度条的内容即可。

需要注意的是，在使用 'nprogress' 库时，需要将 'nprogress.css' 样式文件引入到项目中。