title: NextJS routeChangeComplete doesn't trigger on _app.js
body: <p>Here my ReactJS' snippet:</p>
  
  <pre><code> const LoaderModal = dynamic(
      () =&gt; import("~/modal/Loader/Loader"),
      { ssr: false }
   )
       export default class MyApp extends Component {
  state={
  displayLoader:false
  }
  componentDidMount(){
      let specificChangeStart= Router.events.on('routeChangeStart', () =&gt; {
          console.log("routeChangeStart")
          this.setState({displayLoader:true})
      })
      let specificComplete = Router.events.on('routeChangeComplete', () =&gt; {
          console.log("routeChangeComplete")
          this.setState({displayLoader:false})
      })
      let specificError= Router.events.on('routeChangeError',() =&gt; {
          console.log("routeChangeError")
          this.setState({displayLoader:false})
      })
  }
  render(){
      let { Component, pageProps }=this.props
      let {displayLoader}=this.state
        return(
            &lt;LayoutContextProvider &gt;    
                &lt;Component {...pageProps}/&gt;
                {
                    displayLoader &amp;&amp;
                        &lt;LoaderModal/&gt;
                }
            &lt;/LayoutContextProvider&gt;
        )
    }
  }
  </code></pre>
  
  <p>I am using nextjs version 9.1.4.</p>
  
  <p>As you can see the Router's events are stored in the componentDidMount() component lifecycle's stage. I have stored them in variable to make them specific from other declarations in my app. I have also tried without assigning them, the both method fail so far.</p>
  
  <p>How can I make the Router works, is there a subtlety to be inform of here?</p>