Error: Invalid with child after updating to Next.js 13

Question

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

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

Answer 1

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>

Answer 2

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

Answer 3

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.

Answer 4

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>

Answer 5

If you are migrating to Next 13 and you have used <Link> tag at so many places. You could deactivate the behaviour through next.config.js though.

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  experimental: {
    newNextLinkBehavior: false,
  },
};

module.exports = nextConfig;

Thanks to icyJoseph: https://github.com/vercel/next.js/discussions/42994#discussioncomment-4181081

Answer 6

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

Run the new-link codemod to automatically upgrade previous versions of Next.js to the new usage:

npx @next/codemod new-link .

This will change <Link><a id="link">Home<a></Link> to <Link id="link">Home</Link>.

Alternatively, you can add the legacyBehavior prop <Link legacyBehavior><a id="link">Home</a></Link>.

ref: https://nextjs.org/docs/messages/invalid-new-link-with-extra-anchor

Answer 7

To fix this error simply replace your code with the given below code.

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

I hope so it will work