title: Cannot read properties of undefined (reading '0')
body: <p>I have a page coded in React with NextJS hooks, when I try to render a page the error says what's in the title, I presume because the object which I'm mapping is empty/undefined on first load. I added &quot;?&quot; to every map I have on the page and it's still giving me this error... I noticed that if I stay on that page after it gives me error and press &quot;Ctrl + shift + r&quot; the page loads normally. What could be causing this?</p>
  <pre><code>import {Fragment, useEffect} from &quot;react&quot;;
  import Head from &quot;next/head&quot;;
  import DashboardPage from &quot;../../../../components/components/dashboard/DashboardPage&quot;;
  import LayoutDashboard from &quot;../../../../components/layout/LayoutDashboard&quot;;
  import React from &quot;react&quot;;
  import Pusher from &quot;pusher-js&quot;;
  import useSWR, {mutate} from &quot;swr&quot;;
  
  const fetcher = async () =&gt; {
    const response1 = await fetch(&quot;API&quot;);
    const data1 = await response1.json();
  
  
    const props = {
      data: data1,
    };
    return props;
  };
  
  export default function Dashboard(props) {
    const {data, error} = useSWR(&quot;data&quot;, fetcher);
  
    useEffect(() =&gt; {
      //Pusher.logToConsole = true;
      var pusher = new Pusher(&quot;pshr&quot;, {
        cluster: &quot;eu&quot;,
      });
      const channel = pusher.subscribe(&quot;chnl&quot;);
      channel.bind(&quot;chnl&quot;, function (data) {
        console.log(data);
        mutate(&quot;data&quot;);
      });
    }, []);
  
    if (error) return &quot;Error&quot;;
    if (!data) return &quot;Loading&quot;;
  
    console.log(data);
    return (
      &lt;Fragment&gt;
        &lt;Head&gt;
          &lt;title&gt;Dashboard&lt;/title&gt;
          &lt;link rel=&quot;icon&quot; href=&quot;/favicon.ico&quot; /&gt;
         
        &lt;/Head&gt;
  
        &lt;LayoutDashboard restaurantData={props?.restaurantData[0]}&gt;
          &lt;DashboardPage
            orders={data?.showItemsOnOrder}
            dashboardCards={data?.dashboardCardInfo}
            ordersGraph={data?.dashboardGraph}
          /&gt;
        &lt;/LayoutDashboard&gt;
      &lt;/Fragment&gt;
    );
  }
  
  export async function getStaticPaths() {
    const response = await fetch(`API`);
    const data = await response.json();
  
    const tables = [];
    for (var i = 1; i &lt;= data[0].restaurantTables; i++) {
      tables.push({
        restaurant: data[0].queryName,
        tableNr: i.toString(),
      });
    }
  
    return {
      paths: tables.map((table) =&gt; {
        return {
          params: {
            restaurantName: table.restaurant,
            tableNr: table.tableNr,
          },
        };
      }),
      fallback: false,
    };
  }
  
  export async function getStaticProps() {
    const response = await fetch(`API`);
    const data = await response.json();
  
    return {
      props: {
        restaurantData: data,
      },
      revalidate: 1,
    };
  }
  </code></pre>
  <p><strong>EDIT</strong>
  I recognized that the site works normally if I go straight to the link that I want... It stops working when I'm calling components with <strong>Link</strong> tags in nextJS then it throws an error that it's in title... So if I go straight to the link everything works as expected maybe that is also the reason that the page works if I click on my link and then refresh it... So what could be the problem with <strong>Link</strong> tag? This is my code for it:</p>
  <pre><code>&lt;Link
         href={{
                pathname: &quot;/restaurant/restaurantName/dashboard/&quot;,
                query: {restaurantName: restaurantName},
              }}
            &gt;
              &lt;div
                className={
                  router.pathname == &quot;/restaurant/[restaurantName]/dashboard&quot;
                    ? &quot;text-blue-600 bg-gray-50&quot;
                    : &quot;text-gray-700 &quot;
                }
              &gt;
                &lt;div className=&quot;flex p-3  space-x-4 0 hover:bg-gray-50 hover:text-blue-600  cursor-pointer&quot;&gt;
                  &lt;DonutLargeIcon className=&quot; text-gray-300&quot; /&gt;
                  &lt;p className=&quot;&quot;&gt;Dashbord&lt;/p&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/Link&gt;
  </code></pre>