Hydration error due to if statement in Next.js [duplicate]

Question

I am getting three errors due to the if statement in my _app.js file.

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.

What is the cause of the error and how do I fix it?

import '../styles/globals.css'
import Popup from "../components/register-popup.js";
import { getCookies, setCookies, removeCookies } from 'cookies-next';

var isValid = getCookies("noPopup").noPopup != "valid";

function MyApp({ Component, pageProps }) {
  if (isValid) {
    return (
      <div>
        <Popup />
      </div>
    )
  } else {
    return (
      <div>
        <Component {...pageProps} />
      </div>
    )
  }
}

export default MyApp

Answer 1

change your code

import '../styles/globals.css'
import Popup from "../components/register-popup.js";
import { getCookies, setCookies, removeCookies } from 'cookies-next';


function MyApp({ Component, pageProps }) {
  const isValid = getCookies("noPopup").noPopup != "valid";

  if (isValid) {
    return  <Popup />    
  } else {
    return  <Component {...pageProps} />
  }
}

export default MyApp