Next.js tag vs passHref

Question

Can someone explain to me the difference between using passHref and using an anchor tag when setting up links between pages in Next.js?

E.g. what is the difference between:

<Link href={`/posts/${post.id}`} passHref>
  <h2>
    {post.id} {post.title}
  </h2>
</Link>

and

<Link href={`/posts/${post.id}`}>
  <a>
    {post.id} {post.title}
  </a>
</Link>

I tried reading about it in the documentation but could not seem to find the answer.

https://stackoverflow.com/questions/68983089/is-it-necessary-to-pass-passhref-to-nextjs-link-having-a-semantic-ui-react-a This question was passively answered already :) — peanutbatterballs, May 16 '22 at 15:40
The difference between those two code blocks is that the first one will not generate an `` tag in the output, while the second will. `passHref` is meant to be used when the direct child of `Link` is a React component that wraps an `` tag, so that the `href` can be passed down to it. In all other scenarios, you should just wrap the children of `Link` with an `` tag. — juliomalves, May 16 '22 at 22:09

score 0 · Answer 1 · answered May 16 '22 at 16:25

From the docs:

passHref - Forces Link to send the href property to its child. Defaults to false

When using <Link> wrapping a custom component and not an anchor tag, the <Link> tag must have the passHref attribute. Without this, the tag will not have the href attribute, which hurts your site's accessibility and might affect SEO.

Source

Next.js tag vs passHref

1 Answers1