Link as a descendant of other Link causes hydration error

[baunov]

Verify canary release

• I verified that the issue exists in the latest Next.js canary release

Provide environment information

"next": "13.4.6"

Which area(s) of Next.js are affected? (leave empty if unsure)

Routing (next/router, next/navigation, next/link)

Link to the code that reproduces this issue or a replay of the bug

https://codesandbox.io/p/sandbox/amazing-jennings-nyfqwl?file=%2Fapp%2Fpage.tsx%3A15%2C57

To Reproduce

I have a use case where the whole item card should be clickable Link. But also there are certain Links inside it (e.g. tags that are used to apply the search).

<Link href={{pathname: `/app/post/${item.id}`}}>
   <div>
       <h3>{item.title}</h3>
       <div>
          {item.tags.map((t) => {
              return <Link key={t} href={{pathname: '/app/search', query: {tags: s}}}>{t}</Link>
          })}
      </div>
 </div>
</Link>

Describe the Bug

Error:

Error: Hydration failed because the initial UI does not match what was rendered on the server.

Warning: Expected server HTML to contain a matching <div> in <a>.

See more info here: https://nextjs.org/docs/messages/react-hydration-error

Expected Behavior

No error. When inner Link is clicked - navigates to inner Link. When the card is clicked (outside of inner Link), navigates to outer Link.

Which browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

[Leaden132]

getting this as well

[baunov]

It appears that nesting links is generally considered a bad practice (or even illegal). I solved my case by removing nesting and artificially increasing card link clickable area using css. Like in this article: https://css-tricks.com/nested-links/

[switz]

Also seeing this pop up quite a bit now. I suppose nested links are bad, but I have several use cases for them – anyone have any solves here?

[Laith-Alayassa]

I had the same issue.

I think the reason is that I was using a child component inside the <Link> that contained <a> tag inside it.
Once I removed the <a> tag and replaced it with a div (the navigation was controlled by the <link> now) it worked.

Not sure if that is the reason for you but that's what solved it for me. Perhaps having a <Link> as a child of <Link> causes a similar issue (I think <Link> creates an <a> tag under the hood)

[leerob]

This is expected – you should not nest <a> tags within <a> tags 🙏

[github-actions]

This closed issue has been automatically locked because it had no new activity for 2 weeks. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.