title: Hydration error due to if statement in Next.js
body: <p>I am getting three errors due to the if statement in my _app.js file.</p>
  <pre><code>Error: Hydration failed because the initial UI does not match what was rendered on the server.
  Error: Hydration failed because the initial UI does not match what was rendered on the server.
  Error: There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.
  </code></pre>
  <p>What is the cause of the error and how do I fix it?</p>
  <pre><code>import '../styles/globals.css'
  import Popup from &quot;../components/register-popup.js&quot;;
  import { getCookies, setCookies, removeCookies } from 'cookies-next';
  
  var isValid = getCookies(&quot;noPopup&quot;).noPopup != &quot;valid&quot;;
  
  function MyApp({ Component, pageProps }) {
    if (isValid) {
      return (
        &lt;div&gt;
          &lt;Popup /&gt;
        &lt;/div&gt;
      )
    } else {
      return (
        &lt;div&gt;
          &lt;Component {...pageProps} /&gt;
        &lt;/div&gt;
      )
    }
  }
  
  export default MyApp
  </code></pre>