rsnext/errors/invalid-new-link-with-extra-anchor.md
Duncan Ogle 848bb3af73
Escape HTML on "<Link> with <a> child" page (#42114)
Non-escaped characters is leading this page to attempt to render the title as HTML tags. This change escapes those values so they may present correctly

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

<img width="524" alt="Screenshot 2022-10-29 at 06 57 16" src="https://user-images.githubusercontent.com/5629994/198817257-47b45ce9-2841-4db1-82f2-91e2c9b22808.png">



## Documentation / Examples

- [x] Make sure the linting passes by running `pnpm build && pnpm lint`
- [x] The "examples guidelines" are followed from [our contributing doc](https://github.com/vercel/next.js/blob/canary/contributing/examples/adding-examples.md)
2022-10-31 16:16:42 +00:00

633 B

Invalid <Link> with <a> child

Why This Error Occurred

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

Possible Ways to Fix It

Run the new-link codemod to automatically upgrade previous versions of Next.js to the new <Link> 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>.