title: I want to render the page on Next.js conditionally
body: <p>I have the following code on my -app.js:</p>
  <pre><code>  import { useState, useEffect } from &quot;react&quot;;
    import PropTypes from &quot;prop-types&quot;;
      
      ...
  
  
  export default function MyApp(props) {
    const { Component, pageProps } = props;
    const [cartItems, setCartItems] = useState([]);
  
    //this prop will be passed to all the pages
    const passedProps = {
      ...pageProps,
      cartItems: cartItems,
      setCartItems: setCartItems,
    };
  
    ...
  
      //on App load do the following:
        useEffect(() =&gt; {
         
      ...
  
      //get cart items from  localstorage if exist,else set to empty array;
      const savedCartItems = localStorage.getItem(&quot;cartItems&quot;),
        cartItems = JSON.parse(savedCartItems) || [];
      setCartItems(cartItems);
    }, []);
  
    return (
    
          ...
          &lt;Component {...passedProps} /&gt;
        ...
      &lt;/&gt;
    );
  }
  
  MyApp.propTypes = {
    Component: PropTypes.elementType.isRequired,
    pageProps: PropTypes.object.isRequired,
  };
  </code></pre>
  <p>Following is the code on checkout.js</p>
  <pre><code>import { useEffect, useState } from &quot;react&quot;;
  import PropTypes from &quot;prop-types&quot;;
  import { useRouter } from &quot;next/router&quot;;
  
  ...
  export default function Checkout(props) {
       router = useRouter(),
      { cartItems } = props;
  
   ...
    // on checkout page load if cart is empty redirect to carts page
    useEffect(() =&gt; {
      !cartItems.length &amp;&amp; router.push(&quot;/cart&quot;);
    }, [cartItems, router]);
  
   ...
    return (
     ...
  }
  
  Checkout.propTypes = {
    cartItems: PropTypes.arrayOf(
      PropTypes.shape({
        title: PropTypes.string,
        variations: PropTypes.objectOf(PropTypes.object),
        qty: PropTypes.number,
        price: PropTypes.number,
      })
    ),
  };
  </code></pre>
  <p>I need to redirect from checkout page to cart page only if the cart is empty, but I am being redirected every time even when the cart has items. I think it's because of the fact that on the initial page load, items have still not been loaded to the parent-app component from local storage and are still undefined. any solutions to this??</p>