title: NextJS error message: Failed prop type: The prop `href` expects a `string` or `object` in `<Link>`, but got `undefined` instead
body: <p>I'm implementing a header from a GatsbyJS project into NextJS project and get the following error message:</p>
  <p>&quot;Error: Failed prop type: The prop <code>href</code> expects a <code>string</code> or <code>object</code> in <code>&lt;Link&gt;</code>, but got <code>undefined</code> instead.&quot;</p>
  <p>When removing the following from the header.jsx it does not provide any error messages:
  &lt;MenuButton item={{ icon: &quot;/images/icons/hamburger.svg&quot; }} /&gt;</p>
  <p>Can you guide me on what I'm doing wrong?</p>
  <p>This is my header.jsx file:</p>
  <pre class="lang-js prettyprint-override"><code>import React, { useEffect, useRef, useState } from &quot;react&quot;;
  import styled from &quot;styled-components&quot;;
  import Link from &quot;next/link&quot;;
  import { menuData } from &quot;../../data/menuData&quot;;
  import MenuButton from &quot;../buttons/MenuButton.jsx&quot;;
  import Image from &quot;next/image&quot;;
  import MenuTooltip from &quot;../tooltips/MenuTooltip&quot;;
  
  export default function Header() {
    const [isOpen, setIsOpen] = useState(false);
    const ref = useRef();
    const tooltipRef = useRef();
  
    function handleClick(event) {
      setIsOpen(!isOpen);
      event.preventDefault();
    }
  
    function handleClickOutside(event) {
      if (
        ref.current &amp;&amp;
        !ref.current.contains(event.target) &amp;&amp;
        !tooltipRef.current.contains(event.target)
      ) {
        setIsOpen(false);
      }
    }
  
    useEffect(() =&gt; {
      document.addEventListener(&quot;mousedown&quot;, handleClickOutside);
  
      return () =&gt; {
        document.removeEventListener(&quot;mousedown&quot;, handleClickOutside);
      };
    }, []);
  
    return (
      &lt;Wrapper&gt;
        &lt;Link href=&quot;/&quot;&gt;
          &lt;Logo&gt;
            &lt;Image
              src=&quot;/images/logos/logo.png&quot;
              alt=&quot;Logo&quot;
              width={120}
              height={100}
            /&gt;
          &lt;/Logo&gt;
        &lt;/Link&gt;
        &lt;MenuWrapper count={menuData.length} ref={ref}&gt;
          {menuData.map((item, index) =&gt; (
            &lt;MenuButton key={index} item={item} /&gt;
          ))}
          &lt;HamburgerWrapper onClick={(event) =&gt; handleClick(event)}&gt;
            &lt;MenuButton item={{ icon: &quot;/images/icons/hamburger.svg&quot; }} /&gt;
          &lt;/HamburgerWrapper&gt;
        &lt;/MenuWrapper&gt;
        &lt;div ref={tooltipRef}&gt;
          &lt;MenuTooltip isOpen={isOpen} /&gt;
        &lt;/div&gt;
      &lt;/Wrapper&gt;
    );
  }
  
  </code></pre>
  <p>This is my menuTooltip.jsx file:</p>
  <pre class="lang-js prettyprint-override"><code>import React from &quot;react&quot;;
  import styled from &quot;styled-components&quot;;
  import { tooltipData } from &quot;../../data/menuData&quot;;
  import MenuButton from &quot;../buttons/MenuButton&quot;;
  
  export default function MenuTooltip(props) {
    const { isOpen } = props;
    return (
      &lt;Wrapper isOpen={isOpen}&gt;
        {tooltipData.map((item, index) =&gt; (
          &lt;MenuButton key={index} item={item} /&gt;
        ))}
      &lt;/Wrapper&gt;
    );
  }
  </code></pre>
  <p>This is my MenuButton.jsx file:</p>
  <pre class="lang-js prettyprint-override"><code>import React from &quot;react&quot;;
  import styled from &quot;styled-components&quot;;
  import Link from &quot;next/link&quot;;
  import { Caption } from &quot;../styles/TextStyles&quot;;
  
  export default function MenuButton(props) {
    const { item } = props;
    return (
      &lt;Link href={item.link} onClick={props.onClick} key={props}&gt;
        &lt;MenuItem hasTitle={!item.title ? false : true}&gt;
          &lt;img src={item.icon} /&gt;
          {item.title}
        &lt;/MenuItem&gt;
      &lt;/Link&gt;
    );
  }
  </code></pre>
  <p>This is my menuData.jsx file:</p>
  <pre class="lang-js prettyprint-override"><code>export const menuData = [
    { title: &quot;Learn&quot;, icon: &quot;/images/icons/learner02_dm.svg&quot;, link: &quot;/learn&quot; },
    {
      title: &quot;Articles&quot;,
      icon: &quot;/images/icons/article_light.svg&quot;,
      link: &quot;/articles&quot;,
    },
    {
      title: &quot;Community&quot;,
      icon: &quot;/images/icons/community_light.svg&quot;,
      link: &quot;/community&quot;,
    },
    {
      title: &quot;Entrepreneurs&quot;,
      icon: &quot;/images/icons/business02_light.svg&quot;,
      link: &quot;/entrepreneurs&quot;,
    },
  ];
  
  export const footerMenuData = [
    { title: &quot;Learn&quot;, icon: &quot;/images/icons/learner02_dm.svg&quot;, link: &quot;/learn&quot; },
    {
      title: &quot;Articles&quot;,
      icon: &quot;/images/icons/article_light.svg&quot;,
      link: &quot;/articles&quot;,
    },
    {
      title: &quot;Community&quot;,
      icon: &quot;/images/icons/community_light.svg&quot;,
      link: &quot;/community&quot;,
    },
    {
      title: &quot;Entrepreneurs&quot;,
      icon: &quot;/images/icons/business02_light.svg&quot;,
      link: &quot;/entrepreneurs&quot;,
    },
    {
      title: &quot;Updates&quot;,
      icon: &quot;/images/icons/calendar_light.svg&quot;,
      link: &quot;/updates&quot;,
    },
    {
      title: &quot;Help&quot;,
      icon: &quot;/images/icons/help_light.svg&quot;,
      link: &quot;/help&quot;,
    },
  ];
  
  export const tooltipData = [
    { title: &quot;Learn&quot;, icon: &quot;/images/icons/learner02_dm.svg&quot;, link: &quot;/learn&quot; },
    {
      title: &quot;Articles&quot;,
      icon: &quot;/images/icons/article_light.svg&quot;,
      link: &quot;/articles&quot;,
    },
    {
      title: &quot;Community&quot;,
      icon: &quot;/images/icons/community_light.svg&quot;,
      link: &quot;/community&quot;,
    },
    {
      title: &quot;Entrepreneurs&quot;,
      icon: &quot;/images/icons/business02_light.svg&quot;,
      link: &quot;/entrepreneurs&quot;,
    },
  ];
  </code></pre>