How to use the next/router.events function in next

import React from 'react'
import App, { Container } from 'next/app'
import NProgress from 'nprogress'
import Router from 'next/router'
import qs from 'qs'
import { Provider } from 'react-redux'
import withRedux from 'next-redux-wrapper'
import withReduxSaga from 'next-redux-saga'
import { I18nProvider } from 'helpers/I18n'
import configureStore from 'store/configureStore'

Router.events.on('routeChangeStart', (url) => {
  console.log(`Loading: ${url}`)
  NProgress.start()
})
Router.events.on('routeChangeComplete', () => NProgress.done())
Router.events.on('routeChangeError', () => NProgress.done())

class MyApp extends App {
  static async getInitialProps({ Component, ctx }) {
    try {
      // search params
      const search = qs.parse(ctx.asPath.split('?')[1] || '')

      let pageInitialProps = {}

      if (Component.getInitialProps) {
        pageInitialProps = await Component.getInitialProps({ ...ctx, search })
      }

      // Get the `locale` from the request object on the server.
      // In the browser, use the same values that the server serialized.

import App, { Container } from 'next/app'
import React from 'react'
import { ApolloProvider } from 'react-apollo'
import Head from 'next/head'
import Router from 'next/router'
import NProgress from 'nprogress'
import withApolloClient from '../lib/with-apollo-client'
import GitHub from '../components/GitHub'

Router.events.on('routeChangeStart', url => {
  console.log(`Loading: ${url}`)
  NProgress.start()
})
Router.events.on('routeChangeComplete', () => NProgress.done())
Router.events.on('routeChangeError', () => NProgress.done())

class MyApp extends App {
  static async getInitialProps({ Component, ctx }) {
    if (ctx.res) {
      ctx.res.setHeader('Cache-Control', 'maxage=180,s-maxage=60')
    }

    let pageProps = {}

    if (Component.getInitialProps) {
      pageProps = await Component.getInitialProps(ctx)
    }

    return { pageProps }
  }

componentWillUnmount() {
    Router.events.off("routeChangeComplete", this.routeChangeCompleteEvent);
  }
  routeChangeCompleteEvent = (routeUrl: string) => {

    return () => Router.events.off("hashChangeComplete", handle);
  }, [handle]);

useEffect(() => {
        Router.events.on('routeChangeStart', () => {
            NProgress.start();
        });
        Router.events.on('routeChangeComplete', () => NProgress.done());
        Router.events.on('routeChangeError', () => NProgress.done());
    }, []);
    return (<>{ children });

useEffect(() => {
    Router.events.on('routeChangeStart', routeChangeStart);
    document.addEventListener('keydown', escapeCloseViewer);
    return () => {
      Router.events.off('routeChangeStart', routeChangeStart);
      document.removeEventListener('keydown', escapeCloseViewer);
    };
  }, []);

return () => {
      Router.events.off('routeChangeComplete', closeMobileMenu);
    };
  }, []);

useEffect(() => {
    function routeChangeStart(url: string) {
      setLoading(true);
    }
    function routeChangeComplete(url: string) {
      setLoading(false);
    }
    Router.events.on('routeChangeStart', routeChangeStart);
    Router.events.on('routeChangeComplete', routeChangeComplete);

    return () => {
      Router.events.off('routeChangeStart', routeChangeStart);
      Router.events.off('routeChangeComplete', routeChangeComplete);
    };
  }, []);

import React from 'react'
import Header from './Header'
import NextSeo from 'next-seo';
import Router from "next/router";

import '../asserts/styles.less'
import SEO from '../next-seo.config';

Router.events.on('routeChangeComplete', () => { window.scrollTo(0, 0); });

const App = ({ children }) => (
  <main>
    
    {children}
  </main>
)

export default App

componentWillUnmount() {
    clearTimeout(this.timeout)
    Router.events.off('routeChangeStart', this.onRouteChangeStart)
    Router.events.off('routeChangeComplete', this.onRouteChangeComplete)
    Router.events.off('routeChangeError', this.onRouteChangeError)
  }
  componentDidUpdate() {