2023-07-05 15:11:16 +02:00
|
|
|
---
|
|
|
|
title: 'Invalid `<Link>` with `<a>` child'
|
|
|
|
---
|
2022-10-25 07:39:22 +02:00
|
|
|
|
2023-07-05 15:11:16 +02:00
|
|
|
## Why This Error Occurred
|
2022-10-25 07:39:22 +02:00
|
|
|
|
|
|
|
Starting with Next.js 13, `<Link>` renders as `<a>`, so attempting to use `<a>` as a child is invalid.
|
|
|
|
|
2023-07-05 15:11:16 +02:00
|
|
|
## Possible Ways to Fix It
|
2022-10-25 07:39:22 +02:00
|
|
|
|
|
|
|
Run the `new-link` codemod to automatically upgrade previous versions of Next.js to the new `<Link>` usage:
|
|
|
|
|
2023-07-05 15:11:16 +02:00
|
|
|
```bash filename="Terminal"
|
2022-10-25 07:39:22 +02:00
|
|
|
npx @next/codemod new-link .
|
|
|
|
```
|
|
|
|
|
2023-05-21 23:31:39 +02:00
|
|
|
This will change `<Link><a id="link">Home</a></Link>` to `<Link id="link">Home</Link>`.
|
2022-10-25 07:39:22 +02:00
|
|
|
|
2023-01-24 02:06:50 +01:00
|
|
|
Alternatively, you can add the `legacyBehavior` prop `<Link legacyBehavior><a id="link">Home</a></Link>`.
|
2022-10-25 07:39:22 +02:00
|
|
|
|
2023-07-05 15:11:16 +02:00
|
|
|
## Useful Links
|
2022-10-25 07:39:22 +02:00
|
|
|
|
2023-07-05 15:11:16 +02:00
|
|
|
- [next/link](/docs/pages/api-reference/components/link)
|