如何在Next JS中创建进度条？

import React, { useEffect, useState } from 'react';
import Router from 'next/router';
import LoadingBar from 'react-top-loading-bar';

const ProgressBar = () => {
  const [progress, setProgress] = useState(0);

  useEffect(() => {
    const handleStart = () => setProgress(10);
    const handleComplete = () => setProgress(100);

    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);
    };
  }, []);

  return (
    <LoadingBar
      color="#f11946"
      progress={progress}
      onLoaderFinished={() => setProgress(0)}
    />
  );
};

import React from 'react';
import ProgressBar from './ProgressBar';

const MyPage = () => {
  return (
    <div>
      <ProgressBar />
      {/* 其他页面内容 */}
    </div>
  );
};

export default MyPage;