link-no-children.mdx


Note: Starting with version 16, Next.js does not support the legacyBehavior prop for a Link component anymore . <Link> now renders an <a> element automatically, and does not restrict the number of children passed to it.

Why This Error Occurred

In your application code, next/link was used without passing a child:

For example:

import Link from 'next/link'

export default function Home() {
  return (
    <>
      <Link href="/about" legacyBehavior></Link>
      // or
      <Link href="/about" legacyBehavior />
    </>
  )
}

Possible Ways to Fix It

Make sure one child is used when using <Link>:

import Link from 'next/link'

export default function Home() {
  return (
    <>
      <Link href="/about">To About</Link>
      // or
      <Link href="/about" legacyBehavior>
        <a>To About</a>
      </Link>
    </>
  )
}

Rendered from the public repository vercel/next.js on GitHub; content belongs to its authors. Cached for up to an hour.

errors/link-no-children.mdx · vercel/next.js | Docs MD