title: Is it necessary to pass 'passHref' to NextJS <Link> having a Semantic UI React as its child component?
body: <p>I've been reading the nextjs docs and it says in <a href="https://nextjs.org/docs/api-reference/next/link#if-the-child-is-a-function-component" rel="noreferrer">here</a> that:</p>
  <blockquote>
  <p>If the child of <code>Link</code> is a function component, in addition to using
  <code>passHref</code>, you must wrap the component in <code>React.forwardRef</code>:</p>
  </blockquote>
  <p>I'm new to using Semantic UI React so I'm not really sure if I need to do this and more importantly <strong>how</strong> to do this. I'm concerned about this because just before the quoted lines above, the docs says <a href="https://nextjs.org/docs/api-reference/next/link#if-the-child-is-a-custom-component-that-wraps-an-a-tag" rel="noreferrer">here</a> that:</p>
  <blockquote>
  <p>Without this (the passHref), the  tag will not have the href attribute, which
  might hurt your site’s SEO.</p>
  </blockquote>
  <p>I can pass the <code>passHref</code> like this:</p>
  <pre><code>&lt;Link href='/posts' passHref&gt;
    &lt;Button&gt;See Posts&lt;/Button&gt;
  &lt;/Link&gt;
  </code></pre>
  <p>But the problem is that I don't think that we can wrap a component from Semantic UI with the <code>React.forwardRef</code> since it's just imported. So my questions are:</p>
  <ul>
  <li>Is it just fine to let this be?</li>
  <li>Or is there a workaround for this to &quot;not hurt&quot; my site's SEO?</li>
  </ul>