Fix Accessing element.ref was removed in React 19

packages/next/src/client/app-dir/link.tsx

@@ -204,6 +204,24 @@ function formatStringOrUrl(urlObjOrString: UrlObject | string): string {
   return formatUrl(urlObjOrString)
 }
 
+/**
+ * Returns the ref of a React element handling differences between React 19 and older versions.
+ * It will throw runtime error if the element is not a valid React element.
+ * @param element React.ReactElement
+ * @returns React.Ref<any> | undefined
+ */
+function getReactElementRef(
+  element: React.ReactElement
+): React.Ref<any> | undefined {
+  // 'ref' is passed as prop in React 19, whereas 'ref' is directly attached to children in older versions
+  if (parseInt(React.version, 10) >= 19) {
+    return (element.props as any).ref
+  }
+  // @ts-expect-error element.ref is not included in the ReactElement type
+  // https://github.com/DefinitelyTyped/DefinitelyTyped/discussions/70189
+  return element.ref
+}
+
 /**
  * A React component that extends the HTML `<a>` element to provide [prefetching](https://nextjs.org/docs/app/building-your-application/routing/linking-and-navigating#2-prefetching)
  * and client-side navigation between routes.
@@ -440,7 +458,7 @@ const Link = React.forwardRef<HTMLAnchorElement, LinkPropsReal>(
     }
 
     const childRef: any = legacyBehavior
-      ? child && typeof child === 'object' && child.ref
+      ? getReactElementRef(child)
       : forwardedRef
 
     const [setIntersectionRef, isVisible, resetVisible] = useIntersection({

packages/next/src/client/link.tsx

@@ -242,6 +242,24 @@ function formatStringOrUrl(urlObjOrString: UrlObject | string): string {
   return formatUrl(urlObjOrString)
 }
 
+/**
+ * Returns the ref of a React element handling differences between React 19 and older versions.
+ * It will throw runtime error if the element is not a valid React element.
+ * @param element React.ReactElement
+ * @returns React.Ref<any> | undefined
+ */
+function getReactElementRef(
+  element: React.ReactElement
+): React.Ref<any> | undefined {
+  // 'ref' is passed as prop in React 19, whereas 'ref' is directly attached to children in older versions
+  if (parseInt(React.version, 10) >= 19) {
+    return (element.props as any).ref
+  }
+  // @ts-expect-error element.ref is not included in the ReactElement type
+  // https://github.com/DefinitelyTyped/DefinitelyTyped/discussions/70189
+  return element.ref
+}
+
 /**
  * A React component that extends the HTML `<a>` element to provide [prefetching](https://nextjs.org/docs/app/building-your-application/routing/linking-and-navigating#2-prefetching)
  * and client-side navigation between routes.
@@ -458,7 +476,7 @@ const Link = React.forwardRef<HTMLAnchorElement, LinkPropsReal>(
     }
 
     const childRef: any = legacyBehavior
-      ? child && typeof child === 'object' && child.ref
+      ? getReactElementRef(child)
       : forwardedRef
 
     const [setIntersectionRef, isVisible, resetVisible] = useIntersection({