fix: performance fixes

components/blog/featured/post/FeaturedPost.tsx

@@ -4,10 +4,10 @@ import dayjs from "dayjs";
 import advancedFormat from "dayjs/plugin/advancedFormat";
 import customParseFormat from "dayjs/plugin/customParseFormat";
 import { motion } from "framer-motion";
-import Link from "next/link";
 import { memo } from "react";
 
 import { Image } from "components/common/image/Image";
+import { SuperLink } from "components/common/link/SuperLink";
 
 import styles from "./featuredPost.module.scss";
 
@@ -27,7 +27,7 @@ interface FeaturedPostProps {
 }
 
 export const FeaturedPost = memo<FeaturedPostProps>(({ post }) => (
-  <Link href={`/blog/${post.slug}`} className={styles.link}>
+  <SuperLink href={`/blog/${post.slug}`} className={styles.link}>
     <motion.div className={styles.post} whileHover="hover">
       <motion.div className={styles.image} variants={imageVariants}>
         <Image
@@ -45,7 +45,7 @@ export const FeaturedPost = memo<FeaturedPostProps>(({ post }) => (
       </div>
       <h3 className={styles.title}>{post.title}</h3>
     </motion.div>
-  </Link>
+  </SuperLink>
 ));
 
 FeaturedPost.displayName = "FeaturedPost";

components/blog/listing/thumbnail/PostThumbnail.tsx

@@ -1,7 +1,7 @@
 import { motion } from "framer-motion";
-import Link from "next/link";
 import { memo } from "react";
 
+import { SuperLink } from "components/common/link/SuperLink";
 import { Skeleton } from "components/common/skeleton/Skeleton";
 import { allCategories } from "data/categories";
 import Arrow from "public/svg/right-top-arrow.svg";
@@ -15,7 +15,7 @@ interface PostThumbnailProps {
 }
 
 export const PostThumbnail = memo<PostThumbnailProps>(({ post }) => (
-  <Link href={`/blog/${post.slug}`}>
+  <SuperLink href={`/blog/${post.slug}`}>
     <motion.article className={styles.post} layout>
       <h2 className={styles.title}>{post.title}</h2>
       <p className={styles.excerpt}>{post.excerpt}</p>
@@ -34,7 +34,7 @@ export const PostThumbnail = memo<PostThumbnailProps>(({ post }) => (
         </div>
       </div>
     </motion.article>
-  </Link>
+  </SuperLink>
 ));
 
 export const PostThumbnailSkeleton = () => <Skeleton h={17} />;

components/blog/popular/PopularPosts.tsx

@@ -1,7 +1,7 @@
 import clsx from "clsx";
-import Link from "next/link";
 import { memo } from "react";
 
+import { SuperLink } from "components/common/link/SuperLink";
 import { Skeleton } from "components/common/skeleton/Skeleton";
 import Arrow from "public/svg/right-top-arrow.svg";
 
@@ -22,9 +22,9 @@ export const PopularPosts = memo<PopularPostsProps>(({ posts }) => (
           <span className={styles.icon}>
             <Arrow />
           </span>
-          <Link href={`/blog/${post.slug}`} target="blank">
+          <SuperLink href={`/blog/${post.slug}`} target="blank">
             {post.title}
-          </Link>
+          </SuperLink>
         </li>
       ))}
     </ul>

components/common/link/SuperLink.tsx

@@ -0,0 +1,40 @@
+"use client";
+
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import { type ComponentPropsWithRef } from "react";
+
+export const SuperLink = (props: ComponentPropsWithRef<typeof Link>) => {
+  const router = useRouter();
+  const strHref = typeof props.href === "string" ? props.href : props.href.href;
+
+  const conditionalPrefetch = () => {
+    const hasFastInternet = !navigator.connection || navigator.connection.effectiveType === "4g";
+    if (strHref && hasFastInternet) {
+      void router.prefetch(strHref);
+    }
+  };
+
+  return (
+    <Link
+      {...props}
+      prefetch={false}
+      onMouseEnter={(e) => {
+        conditionalPrefetch();
+        return props.onMouseEnter?.(e);
+      }}
+      onPointerEnter={(e) => {
+        conditionalPrefetch();
+        return props.onPointerEnter?.(e);
+      }}
+      onTouchStart={(e) => {
+        conditionalPrefetch();
+        return props.onTouchStart?.(e);
+      }}
+      onFocus={(e) => {
+        conditionalPrefetch();
+        return props.onFocus?.(e);
+      }}
+    />
+  );
+};

components/layout/header/navbar/Navbar.tsx

@@ -1,10 +1,11 @@
 "use client";
 
 import { motion } from "framer-motion";
-import Link from "next/link";
 import { usePathname } from "next/navigation";
 import { memo } from "react";
 
+import { SuperLink } from "components/common/link/SuperLink";
+
 import styles from "./navbar.module.scss";
 
 interface Route {
@@ -26,9 +27,9 @@ export const Navbar = memo<NavbarProps>(({ routes }) => {
       <ul className={styles.list}>
         {routes.map((route) => (
           <li key={route.path} className={styles.link}>
-            <Link href={route.path} className={styles.label}>
+            <SuperLink href={route.path} className={styles.label}>
               {route.label}
-            </Link>
+            </SuperLink>
             {pathname === route.path || (pathname.startsWith(route.path) && route.path !== "/") ? (
               <motion.div
                 className={styles.active}

components/resource/layout/info/breadcrumbs/Breadcrumbs.tsx

@@ -1,6 +1,6 @@
-import Link from "next/link";
 import { memo, Fragment } from "react";
 
+import { SuperLink } from "components/common/link/SuperLink";
 import RightArrow from "public/svg/right-arrow.svg";
 
 import styles from "./breadcrumbs.module.scss";
@@ -13,9 +13,9 @@ export const Breadcrumbs = memo<BreadcrumbsProps>(({ routes }) => (
   <div className={styles.breadcrumbs}>
     {routes.map((route, index) => (
       <Fragment key={route.path}>
-        <Link href={route.path} className={styles.link}>
+        <SuperLink href={route.path} className={styles.link}>
           {route.name}
-        </Link>
+        </SuperLink>
         {index !== routes.length - 1 ? (
           <div className={styles.separator}>
             <RightArrow />

components/tile/about/AboutTile.tsx

@@ -1,13 +1,13 @@
 import Image from "next/image";
-import Link from "next/link";
 
+import { SuperLink } from "components/common/link/SuperLink";
 import WinkingAvatar from "public/img/avatars/winking.png";
 import Arrow from "public/svg/right-top-arrow.svg";
 
 import styles from "./aboutTile.module.scss";
 
 export const AboutTile = () => (
-  <Link href="/about" className={styles.tile}>
+  <SuperLink href="/about" className={styles.tile}>
     <div className={styles.avatar}>
       <Image src={WinkingAvatar} alt="winking memoji" />
     </div>
@@ -22,5 +22,5 @@ export const AboutTile = () => (
         <Arrow />
       </span>
     </div>
-  </Link>
+  </SuperLink>
 );

components/tile/latestPost/LatestPostTile.tsx

@@ -1,7 +1,7 @@
-import Link from "next/link";
 import { memo } from "react";
 
 import { Image } from "components/common/image/Image";
+import { SuperLink } from "components/common/link/SuperLink";
 import Arrow from "public/svg/right-top-arrow.svg";
 
 import styles from "./latestPostTile.module.scss";
@@ -13,7 +13,7 @@ interface LatestPostTileProps {
 }
 
 export const LatestPostTile = memo<LatestPostTileProps>(({ post }) => (
-  <Link href={`/blog/${post.slug}`}>
+  <SuperLink href={`/blog/${post.slug}`}>
     <article className={styles.article}>
       <div className={styles.info}>
         <h2 className={styles.title}>{post.title}</h2>
@@ -38,7 +38,7 @@ export const LatestPostTile = memo<LatestPostTileProps>(({ post }) => (
         />
       </div>
     </article>
-  </Link>
+  </SuperLink>
 ));
 
 LatestPostTile.displayName = "LatestPostTile";

components/work/listing/thumbnail/ProjectThumbnail.tsx

@@ -1,9 +1,9 @@
 import clsx from "clsx";
 import { motion } from "framer-motion";
-import Link from "next/link";
 import { memo } from "react";
 
 import { Image } from "components/common/image/Image";
+import { SuperLink } from "components/common/link/SuperLink";
 import { Skeleton } from "components/common/skeleton/Skeleton";
 import { Project } from "types";
 
@@ -21,7 +21,7 @@ interface ProjectThumbnailProps {
 }
 
 export const ProjectThumbnail = memo<ProjectThumbnailProps>(({ project, featured = false }) => (
-  <Link href={`/work/${project.slug}`}>
+  <SuperLink href={`/work/${project.slug}`}>
     <motion.article
       className={clsx(
         styles.thumbnail,
@@ -61,7 +61,7 @@ export const ProjectThumbnail = memo<ProjectThumbnailProps>(({ project, featured
         </div>
       </div>
     </motion.article>
-  </Link>
+  </SuperLink>
 ));
 
 export const ProjectThumbnailSkeleton = () => (

components/work/tile/ProjectTile.tsx

@@ -2,10 +2,10 @@
 
 import clsx from "clsx";
 import { motion } from "framer-motion";
-import Link from "next/link";
 import { memo } from "react";
 
 import { Image } from "components/common/image/Image";
+import { SuperLink } from "components/common/link/SuperLink";
 import { useTheme } from "providers/ThemeProvider";
 import Arrow from "public/svg/right-top-arrow.svg";
 
@@ -27,7 +27,7 @@ export const ProjectTile = memo<ProjectTileProps>(({ project, mockupPosition })
   };
 
   return (
-    <Link href={`/work/${project.slug}`} className={styles.link}>
+    <SuperLink href={`/work/${project.slug}`} className={styles.link}>
       <motion.div
         whileHover="hover"
         className={styles.project}
@@ -55,7 +55,7 @@ export const ProjectTile = memo<ProjectTileProps>(({ project, mockupPosition })
           <Arrow />
         </div>
       </motion.div>
-    </Link>
+    </SuperLink>
   );
 });
 

package.json

@@ -76,6 +76,7 @@
     "eslint-plugin-unused-imports": "2.0.0",
     "husky": "8.0.0",
     "lint-staged": "12.3.2",
+    "network-information-types": "0.1.1",
     "prettier": "2.5.1",
     "rehype-stringify": "8",
     "remark-parse": "8.0.3",

tsconfig.json

@@ -29,7 +29,8 @@
       {
         "name": "next"
       }
-    ]
+    ],
+    "types": ["./node_modules/network-information-types"]
   },
   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
   "exclude": ["node_modules"]