experimental prefetching on hover for common links

components/Header/Header.tsx

@@ -15,7 +15,7 @@ const Header = ({ className, ...rest }: HeaderProps) => {
   return (
     <header className={clsx(styles.header, className)} {...rest}>
       <nav className={styles.nav}>
-        <Link href="/" rel="author" aria-label={config.authorName} plain className={styles.home}>
+        <Link dynamicOnHover href="/" rel="author" aria-label={config.authorName} plain className={styles.home}>
           <Image
             src={avatarImg}
             alt={`Photo of ${config.authorName}`}

components/Link/Link.tsx

@@ -5,18 +5,24 @@ import type { ComponentPropsWithoutRef } from "react";
 import styles from "./Link.module.css";
 
 export type LinkProps = ComponentPropsWithoutRef<typeof NextLink> & {
-  plain?: boolean; // disable fancy text-decoration effect
+  /** Disables fancy text-decoration effect when true. */
+  plain?: boolean;
+
+  // https://github.com/vercel/next.js/pull/77866/files#diff-040f76a8f302dd3a8ec7de0867048475271f052b094cd73d2d0751b495c02f7dR30
+  dynamicOnHover?: boolean;
 };
 
-const Link = ({ href, rel, target, prefetch = false, plain, className, ...rest }: LinkProps) => {
+const Link = ({ href, rel, target, prefetch = false, dynamicOnHover, plain, className, ...rest }: LinkProps) => {
   // This component auto-detects whether or not this link should open in the same window (the default for internal
   // links) or a new tab (the default for external links). Defaults can be overridden with `target="_blank"`.
   const isExternal = typeof href === "string" && !["/", "#"].includes(href[0]);
 
   return (
     <NextLink
+      prefetch={dynamicOnHover ? null : prefetch}
+      // @ts-expect-error
+      unstable_dynamicOnHover={dynamicOnHover}
       href={href}
-      prefetch={prefetch}
       target={target || (isExternal ? "_blank" : undefined)}
       rel={`${rel ? `${rel} ` : ""}${target === "_blank" || isExternal ? "noopener noreferrer" : ""}` || undefined}
       className={clsx(

components/MenuItem/MenuItem.tsx

@@ -26,6 +26,7 @@ const MenuItem = ({ text, href, icon, current, className, ...rest }: MenuItemPro
   if (href) {
     return (
       <Link
+        dynamicOnHover
         href={href}
         aria-label={text}
         plain