title: listen for router change via useEffect in NextJS
body: <p>I am trying to get an useEffect to execute some code when a user changes the page via the navigation.</p>
  <p>My problem is that the useEffect does not execute on the route change (does not show up in console). It does only show up on the first initial page load and never after</p>
  <p>I used the <a href="https://github.com/vercel/next.js/tree/canary/examples/with-google-analytics" rel="noreferrer">google analytics</a> example from nextJS</p>
  <p>This is my simple _app.tsx</p>
  <pre><code>import type { AppProps } from &quot;next/app&quot;;
  import &quot;./styles/css.scss&quot;;
  import { useRouter } from &quot;next/dist/client/router&quot;;
  import { useEffect} from &quot;react&quot;;
  
  
  
  const Child: React.FC = ({ children }) =&gt; {
    return (
      &lt;&gt;
        &lt;div&gt;{children}&lt;/div&gt;
      &lt;/&gt;
    );
  };
  
  const App = ({ Component, pageProps }: AppProps) =&gt; {
    const router = useRouter();
  
    useEffect(() =&gt; {
  
      console.log(&quot;called&quot;);
  
    }, [router.events]);
    return (
      &lt;&gt;
        &lt;Child&gt;
          &lt;Component {...pageProps} /&gt;
        &lt;/Child&gt;
      &lt;/&gt;
    );
  };
  export default App;
  </code></pre>