title: Persist a navbar in Next.js with custom `App`
body: <p>I'm learning Next.js and stumbled upon this issue. Back in the old ways, this is how you would use the navbar across all pages</p>
  
  <pre><code>return (
      &lt;Container&gt;
          &lt;Navbar /&gt;
          &lt;Component {...pageProps}/&gt;
      &lt;/Container&gt;
  
     )
  </code></pre>
  
  <p>but now the documentation is written using functional components <a href="https://nextjs.org/docs/advanced-features/custom-app" rel="nofollow noreferrer">https://nextjs.org/docs/advanced-features/custom-app</a>. I'm trying something like this but so far it doesn't work</p>
  
  <pre><code>  return (
      &lt;&gt;
        &lt;Navbar /&gt;
        &lt;Component {...pageProps} /&gt;
      &lt;/&gt;
    );
   }
  </code></pre>
  
  <p>Does anyone have any idea of how to make this work?</p>