Function LinkComponent

packages/next/src/client/app-dir/link.tsx:337–771

(
  props: LinkProps & {
    children: React.ReactNode
    ref: React.Ref<HTMLAnchorElement>
  }
)

 * @see https://nextjs.org/docs/app/api-reference/components/link
 */
export default function LinkComponent(
  props: LinkProps & {
    children: React.ReactNode
    ref: React.Ref<HTMLAnchorElement>
  }
) {
  const [linkStatus, setOptimisticLinkStatus] = useOptimistic(IDLE_LINK_STATUS)

  let children: React.ReactNode

  const linkInstanceRef = useRef<LinkInstance | null>(null)

  const {
    href: hrefProp,
    as: asProp,
    children: childrenProp,
    prefetch: prefetchProp = null,
    passHref,
    replace,
    shallow,
    scroll,
    onClick,
    onMouseEnter: onMouseEnterProp,
    onTouchStart: onTouchStartProp,
    legacyBehavior = false,
    onNavigate,
    transitionTypes,
    ref: forwardedRef,
    unstable_dynamicOnHover,
    ...restProps
  } = props

  children = childrenProp

  if (
    legacyBehavior &&
    (typeof children === 'string' || typeof children === 'number')
  ) {
    children = <a>{children}</a>
  }

  const router = React.useContext(AppRouterContext)

  const prefetchEnabled = prefetchProp !== false

  const fetchStrategy =
    prefetchProp !== false
      ? getFetchStrategyFromPrefetchProp(prefetchProp)
      : // TODO: it makes no sense to assign a fetchStrategy when prefetching is disabled.
        FetchStrategy.PPR

  if (process.env.NODE_ENV !== 'production') {
    function createPropError(args: {
      key: string
      expected: string
      actual: string
    }) {
      return new Error(