{"record":{"id":"f51936f2463d581a","repo":"vercel/next.js","slug":"link-legacybehavior-received-a-direct-child-th","errorCode":null,"errorMessage":"`<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.","messagePattern":"`<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\\.","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"packages/next/src/client/app-dir/link.tsx","lineNumber":555,"sourceCode":"      if (href) {\n        const hasDynamicSegment = href\n          .split('/')\n          .some((segment) => segment.startsWith('[') && segment.endsWith(']'))\n\n        if (hasDynamicSegment) {\n          throw new Error(\n            `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`\n          )\n        }\n      }\n    }\n  }\n\n  // This will return the first child, if multiple are provided it will throw an error\n  let child: any\n  if (legacyBehavior) {\n    if ((children as any)?.$$typeof === Symbol.for('react.lazy')) {\n      throw new Error(\n        `\\`<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.`\n      )\n    }\n\n    if (process.env.NODE_ENV === 'development') {\n      if (onClick) {\n        console.warn(\n          `\"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`\n        )\n      }\n      if (onMouseEnterProp) {\n        console.warn(\n          `\"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`\n        )\n      }\n      try {\n        child = React.Children.only(children)\n      } catch (err) {","sourceCodeStart":537,"sourceCodeEnd":573,"githubUrl":"https://github.com/vercel/next.js/blob/0eb377541648e63402a47b38fee00a8d0ce8f8f1/packages/next/src/client/app-dir/link.tsx#L537-L573","documentation":"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.\" thrown in vercel/next.js.","triggerScenarios":"<Link legacyBehavior> wraps a Server Component or React.lazy child.","commonSituations":"A legacyBehavior Link whose direct child is a Server Component or lazily loaded JSX.","solutions":["Remove legacyBehavior, or make the direct child a Client Component rendering the <a> tag."],"exampleFix":null,"handlingStrategy":"validation","validationCode":null,"typeGuard":null,"tryCatchPattern":null,"preventionTips":[],"tags":[],"backgroundTag":null,"analyzedSha":"0eb377541648e63402a47b38fee00a8d0ce8f8f1","analyzedAt":"2026-08-19T02:10:13.922Z","contentChangedAt":"2026-08-19T02:10:13.922Z","schemaVersion":2},"datasetVersion":"2026-09-14T05:17:10.506Z"}