title: Next js how to avoid re-rendering of common components between routed pages?
body: <p>I have set up the basic router in Next js and I want multiple pages to share a component e.g. a header. The shared component is reloading on each new page load. (How) can I reuse components without rerendering them needlessly between page loads? This is really inefficient compared to CRA + react-router nested routing removing the requirement for any form of shared components.</p>
  <p>Sandox <a href="https://codesandbox.io/s/next-js-sandbox-demo-vs2yb" rel="nofollow noreferrer">here</a></p>
  <p>Shared component code as follows:</p>
  <pre><code>import React, { memo } from &quot;react&quot;;
  
  export default function hello() {}
  
  export const Header = memo(() =&gt; {
    return (
      &lt;&gt;
        &lt;h1&gt;Next js Shared component&lt;/h1&gt;
        &lt;p&gt;{Math.random()}&lt;/p&gt;
      &lt;/&gt;
    );
  });
  
  </code></pre>
  <p>I have tried wrapping a common component in a memo to try to avoid rerender but that doesn't work. Is there a way to share components between pages in Next JS?</p>