vercel/next.js · error

"onClick" was passed to <Link> with `href` of `${formattedHr

Error message

"onClick" was passed to <Link> with `href` of `${formattedHref}` but "legacyBehavior" was set. The legacy behavior requires onClick be set on the child of next/link

What it means

In app-router LinkComponent with legacyBehavior, a dev-only warning fires when an onClick prop was set directly on the <Link>; the legacy contract requires handlers on the child component, since the Link clones props onto the child rather than rendering an <a> itself.

Source

Thrown at packages/next/src/client/app-dir/link.tsx:562

            `Dynamic href \`${href}\` found in <Link> while using the \`/app\` router, this is not supported. Read more: https://nextjs.org/docs/messages/app-dir-dynamic-href`
          )
        }
      }
    }
  }

  // This will return the first child, if multiple are provided it will throw an error
  let child: any
  if (legacyBehavior) {
    if ((children as any)?.$$typeof === Symbol.for('react.lazy')) {
      throw new Error(
        `\`<Link legacyBehavior>\` received a direct child that is either a Server Component, or JSX that was loaded with React.lazy(). This is not supported. Either remove legacyBehavior, or make the direct child a Client Component that renders the Link's \`<a>\` tag.`
      )
    }

    if (process.env.NODE_ENV === 'development') {
      if (onClick) {
        console.warn(
          `"onClick" was passed to <Link> with \`href\` of \`${formattedHref}\` but "legacyBehavior" was set. The legacy behavior requires onClick be set on the child of next/link`
        )
      }
      if (onMouseEnterProp) {
        console.warn(
          `"onMouseEnter" was passed to <Link> with \`href\` of \`${formattedHref}\` but "legacyBehavior" was set. The legacy behavior requires onMouseEnter be set on the child of next/link`
        )
      }
      try {
        child = React.Children.only(children)
      } catch (err) {
        if (!children) {
          throw new Error(
            `No children were passed to <Link> with \`href\` of \`${formattedHref}\` but one child is required https://nextjs.org/docs/messages/link-no-children`
          )
        }
        throw new Error(
          `Multiple children were passed to <Link> with \`href\` of \`${formattedHref}\` but only one child is supported https://nextjs.org/docs/messages/link-multiple-children` +

View on GitHub (pinned to 0eb3775416)

Solutions

1. With legacyBehavior, put onClick on the child <a> element, or remove legacyBehavior and keep onClick on <Link>.

When it happens

Trigger: Thrown at packages/next/src/client/app-dir/link.tsx:562 when the library encounters an invalid state.

Common situations: See trigger scenarios.

AI-assisted analysis of vercel/next.js@0eb3775416 (2026-08-19). Data as JSON: /api/errors/f77b2c74a8771080. Report an issue: GitHub.