vercel/next.js · error · Error

Invalid <Link> with <a> child. Please remove <a> or use <Lin

Error message

Invalid <Link> with <a> child. Please remove <a> or use <Link legacyBehavior>.
Learn more: https://nextjs.org/docs/messages/invalid-new-link-with-extra-anchor

What it means

LinkComponent throws when the single child of a <Link> without legacyBehavior is a plain <a> element, which would nest an anchor inside the anchor Next.js renders. Either remove the <a> or opt into legacyBehavior to own the anchor yourself.

Source

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

        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` +
            (typeof window !== 'undefined'
              ? " \nOpen your browser's console to view the Component stack trace."
              : '')
        )
      }
    } else {
      child = React.Children.only(children)
    }
  } else {
    if (process.env.NODE_ENV === 'development') {
      if ((children as any)?.type === 'a') {
        throw new Error(
          'Invalid <Link> with <a> child. Please remove <a> or use <Link legacyBehavior>.\nLearn more: https://nextjs.org/docs/messages/invalid-new-link-with-extra-anchor'
        )
      }
    }
  }

  const childRef: any = legacyBehavior
    ? child && typeof child === 'object' && child.ref
    : forwardedRef

  // Capture the Owner Stack during render so dev-only warnings emitted later
  // at navigation time can be associated with the JSX that created
  // this <Link>.
  const ownerStack =
    process.env.NODE_ENV !== 'production' && process.env.__NEXT_CACHE_COMPONENTS
      ? // eslint-disable-next-line react-hooks/rules-of-hooks -- build time variables
        React.useMemo(() => {
          // Only capture when a warning might actually need it. Otherwise leave

View on GitHub (pinned to 0eb3775416)

Solutions

1. Remove the nested <a> child, or add legacyBehavior to <Link>.

When it happens

Trigger: <Link> contains a raw <a> child without legacyBehavior.

Common situations: Nesting <a> inside the new Link; remove the anchor or add legacyBehavior.

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