Создайте события маршрута RouteChangeStart и RouteChangeComplete в следующем клиентском компоненте js 14

У меня есть следующий проект js v14.0.4. Я пытаюсь применить индикатор выполнения верхней загрузки с пакетом NProgress для каждого изменения маршрута, которое происходит с помощью Link или router.push(). Но функции handleRouteChangeStart и handleRouteChangeComplete никогда не срабатывают. Я думаю, что проблема связана с Router.events.on('routeChangeStart', handleRouteChangeStart) и Router.events.on('routeChangeComplete', handleRouteChangeComplete), но я не знаю, как их заменить.

'use client';
import React, { useEffect } from 'react';
import { Router } from 'next/router';
import NProgress from 'nprogress'; // Import NProgress
import 'nprogress/nprogress.css'; // Import NProgress styles
import { usePathname } from 'next/navigation';

const TopLoader: React.FC = () => {
const pathname = usePathname();

useEffect(() => {
 const handleRouteChangeStart = (url: string) => {
   console.info(`Route change started: ${url}`);
   // Execute custom logic here on route change start
   NProgress.start();
 };

 const handleRouteChangeComplete = (url: string) => {
   console.info(`Route change completed: ${url}`);
   NProgress.done();
   // Execute custom logic here on route change complete
 };

 // Listen to route change start
 Router.events.on('routeChangeStart', handleRouteChangeStart);

 // Listen to route change complete
 Router.events.on('routeChangeComplete', handleRouteChangeComplete);

 return () => {
   // Clean up event listeners when the component unmounts
   Router.events.off('routeChangeStart', handleRouteChangeStart);
   Router.events.off('routeChangeComplete', handleRouteChangeComplete);
 };
}, [pathname]); // Only re-run effect if pathname changes

useEffect(() => {
 // Clean up NProgress on component unmount
 return () => {
   NProgress.remove();
 };
}, []);

return null;
};

export default TopLoader;