Is it necessary to pass 'passHref' to NextJS <Link> having a Semantic UI React as its child component?

Question

I've been reading the nextjs docs and it says in here that:

If the child of Link is a function component, in addition to using passHref, you must wrap the component in React.forwardRef:

I'm new to using Semantic UI React so I'm not really sure if I need to do this and more importantly how to do this. I'm concerned about this because just before the quoted lines above, the docs says here that:

Without this (the passHref), the tag will not have the href attribute, which might hurt your site’s SEO.

I can pass the passHref like this:

<Link href='/posts' passHref>
  <Button>See Posts</Button>
</Link>

But the problem is that I don't think that we can wrap a component from Semantic UI with the React.forwardRef since it's just imported. So my questions are:

• Is it just fine to let this be?
• Or is there a workaround for this to "not hurt" my site's SEO?

Answer 1

Yes . The nextJs Documentation states if your child is not just an tag but a functional or class component then the passHref is needed. Make sure to pass it whenever you use a react component as a child