No children were passed to `` - Next Js

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:

jsx

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>:

jsx

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>
    </>
  )
}