Invalid <Link> with <a> child. Please remove <a> Next.js Origin: On your device OSI layer 7 · Application Last updated 5 Nov 2026

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

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

Exact message you may see Invalid <Link> with <a> child. Please remove <a> or use <Link legacyBehavior>Invalid <Link> with <a> childError: Invalid <Link> with <a> child. Please remove <a>Multiple children were passed to <Link> with `href`nested anchor <a> inside <Link> Next.js
Explore the map of this error Full error map →
Seen on: Next.js React

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?

🔧 Still not fixed?

Many errors look alike. If the steps above didn’t solve it, one of these is probably what you’re facing:

Where this error sits

Origin: On your device. Errors that are often confused with or caused by this one (click to open):

Conflicting app and page file was found — Next.js: ⨯ Conflicting app and page file was found, please remove the conflicting files to continue: "pages/index.tsx" - "app/page.tsx" (Next.js)Conflicting app and p…CORS error calling Next.js API route / route handler — Browser: Access to fetch at 'https://api.example.com/api/data' from origin 'https://app.example.com' has been blocked by CORS policy (Next.js route handler) (Next.js)CORS error calling Ne…Failed prop type: The prop href expects a string or object in <Link> — Next.js: Error: Failed prop type: The prop `href` expects a `string` or `object` in `<Link>`, but got `undefined` instead (Next.js)Failed prop type: The…Hydration failed — Error: Hydration failed because the initial UI does not match what was rendered on the server (React)Hydration failednext build: fetch failed ECONNREFUSED (build-time API) — Next.js: Error occurred prerendering page "/blog" TypeError: fetch failed { cause: Error: connect ECONNREFUSED 127.0.0.1:3000 } (Next.js)next build: fetch fai…next build: JavaScript heap out of memory — Next.js: FATAL ERROR: Reached heap limit Allocation failed - JavaScript heap out of memory (during next build) (Next.js)next build: JavaScrip…You have a Server Component that imports next/router. Use next/navigation instead — Next.js: You have a Server Component that imports next/router. Use next/navigation instead (Next.js)You have a Server Com…Invalid <…

Explore the map of this error Full error map →

🧠 Still stuck? Analyze your error

Paste the full message, response headers or stack trace — we'll detect the platform and point to the most likely cause.

💬 What worked for others

No tips yet — did something else fix this for you?

Share what worked for you

Tips are checked by an editor before they appear. Links are removed.