# Next.js 13+: Error: Invalid <Link> with <a> child. Please remove <a> or use <Link legacyBehavior>

**Code:** `Invalid <Link> with <a> child. Please remove <a>` · **Category:** Next.js · **Seen on:** Next.js, React

Since Next.js 13 `<Link>` renders its own `<a>`, so nesting your own `<a>` is invalid.

## Meaning

Remove the inner anchor and put classes/attributes on `<Link>` itself: `<Link href="/x" className="btn">Text</Link>`. A codemod exists: `npx @next/codemod new-link .`. Use `legacyBehavior` only for libraries needing a child element.

## Common causes

- Old code `<Link href><a>text</a></Link>`
- Component libraries wrapping Link with an anchor child
- Copy from Next 12 tutorials
- Custom button components using `<a>`
- Styling attached to the inner `<a>`

## Quick fix

1. `<Link href="/about" className="nav">About</Link>`
2. Run `npx @next/codemod new-link .`
3. `legacyBehavior` only if unavoidable

## Detailed fix by platform

### Next.js

1. `npx @next/codemod@latest new-link .`

## How to diagnose

1. **Markup** — Nested <a>?
2. **Styles** — Move to Link?
3. **Lib** — Needs legacyBehavior?

---
Source: [WhatIsMyError](https://whatismyerror.com/errors/nextjs/link-with-a-child-legacy-behavior)