Error: Invalid <Link> with <a> child after updating to Next.js 13-CodePudding

After updating Next.js to version 13, I got this client error

<Link href="/contact">
  <a>
    Contact
  </a>
</Link>

CodePudding user response：

This means in your code, you have <a> inside <link> tags, you can simply remove <a> and make sure the attributes moved to <link>tags.

so one of the best practice for Productions is to lock down the NextJs version in case Breaking changes like this happen without awareness.

CodePudding user response：

To fix this error, remove the a tag from the link. From the link in the error message:

Starting with Next.js 13, <Link> renders as <a>, so attempting to use <a> as a child is invalid.

Invalid

<Link href="/contact">
  <a>
    Contact
  </a>
</Link>

Valid

<Link href="/contact">
    Contact
</Link>

CodePudding user response：

In Next.13, you don't need to wrap with . But if you need it, you need to add legacyBehavior props to the <Link>.

CodePudding user response：

First of all, you don't need to wrap each other it's not a good behavior but if you need it, you can add 'legacyBehavior' in Link. it will work. like this -

<Link legacyBehavior href={"/fashion"}>
            <a className="text-decoration-none">
              <div></div>
            </a>
</Link>