vercel/next.js · error · Error

Component rendered inside next/link has to pass click event

Error message

Component rendered inside next/link has to pass click event to "onClick" prop.

What it means

In the legacyBehavior onClick wrapper on app-router Link, a dev-mode guard throws when the merged handler is invoked with no event object, meaning the custom child component called onClick() without forwarding the click event; without it the Link cannot execute its navigation logic.

Source

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

      setOptimisticLinkStatus,
      ownerStack,
    ]
  )

  const mergedRef = useMergedRef(observeLinkVisibilityOnMount, childRef)

  const childProps: {
    onTouchStart?: React.TouchEventHandler<HTMLAnchorElement>
    onMouseEnter: React.MouseEventHandler<HTMLAnchorElement>
    onClick: React.MouseEventHandler<HTMLAnchorElement>
    href?: string
    ref?: any
  } = {
    ref: mergedRef,
    onClick(e) {
      if (process.env.NODE_ENV !== 'production') {
        if (!e) {
          throw new Error(
            `Component rendered inside next/link has to pass click event to "onClick" prop.`
          )
        }
      }

      if (!legacyBehavior && typeof onClick === 'function') {
        onClick(e)
      }

      if (
        legacyBehavior &&
        child.props &&
        typeof child.props.onClick === 'function'
      ) {
        child.props.onClick(e)
      }

      if (!router) {

View on GitHub (pinned to 0eb3775416)

Solutions

1. Forward the onClick prop to the underlying element in the component rendered inside next/link.

When it happens

Trigger: A custom child component inside next/link does not forward onClick.

Common situations: Wrapping Link around a component that swallows the click event instead of passing it through.

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