refactor: simplify next link component usage

app/contact/page.tsx

@@ -1,5 +1,4 @@
 import PageTitle from "@/components/layout/page-title";
-import Link from "@/components/link";
 import ContactForm from "@/components/contact-form";
 import { createMetadata } from "@/lib/metadata";
 
@@ -18,25 +17,27 @@ const Page = () => {
         <div className="prose prose-sm prose-neutral dark:prose-invert max-w-none">
           <p>
             Fill out this quick form and I&rsquo;ll get back to you as soon as I can! You can also{" "}
-            <Link href="mailto:jake@jarv.is">email me directly</Link> or send me a direct message on{" "}
-            <Link href="https://bsky.app/profile/jarv.is" className="text-nowrap">
+            <a href="mailto:jake@jarv.is">email me directly</a> or send me a direct message on{" "}
+            <a href="https://bsky.app/profile/jarv.is" target="_blank" rel="noopener noreferrer">
               Bluesky
-            </Link>{" "}
+            </a>{" "}
             or{" "}
-            <Link href="https://fediverse.jarv.is/@jake" className="text-nowrap">
+            <a href="https://fediverse.jarv.is/@jake" target="_blank" rel="noopener noreferrer">
               Mastodon
-            </Link>
+            </a>
             .
           </p>
           <p>
             You can grab my public key here:{" "}
-            <Link
+            <a
               href="https://jrvs.io/pgp"
+              target="_blank"
+              rel="noopener"
               title="3BC6 E577 6BF3 79D3 6F67 1480 2B0C 9CF2 51E6 9A39"
               className="bg-muted relative rounded-sm px-[0.3rem] py-[0.2rem] font-mono text-sm font-medium tracking-wider [word-spacing:-0.25em]"
             >
               2B0C 9CF2 51E6 9A39
-            </Link>
+            </a>
             .
           </p>
         </div>

app/hillary/page.tsx

@@ -1,7 +1,6 @@
 import { env } from "@/lib/env";
 import { JsonLd } from "react-schemaorg";
 import PageTitle from "@/components/layout/page-title";
-import Link from "@/components/link";
 import Video from "@/components/video";
 import { createMetadata } from "@/lib/metadata";
 import type { VideoObject } from "schema-dts";
@@ -53,17 +52,17 @@ const Page = () => {
 
       <p className="text-muted-foreground mx-4 mt-5 mb-0 text-center text-sm leading-relaxed">
         Video is property of{" "}
-        <Link href="https://www.hillaryclinton.com/" className="font-bold">
+        <a href="https://www.hillaryclinton.com/" target="_blank" rel="noopener noreferrer" className="font-bold">
           Hillary for America
-        </Link>
+        </a>
         , the{" "}
-        <Link href="https://democrats.org/" className="font-bold">
+        <a href="https://democrats.org/" target="_blank" rel="noopener noreferrer" className="font-bold">
           Democratic National Committee
-        </Link>
+        </a>
         , and{" "}
-        <Link href="https://cnnpressroom.blogs.cnn.com/" className="font-bold">
+        <a href="https://cnnpressroom.blogs.cnn.com/" target="_blank" rel="noopener noreferrer" className="font-bold">
           CNN / WarnerMedia
-        </Link>
+        </a>
         . &copy; 2016.
       </p>
     </>

app/leo/page.tsx

@@ -1,7 +1,6 @@
 import { env } from "@/lib/env";
 import { JsonLd } from "react-schemaorg";
 import PageTitle from "@/components/layout/page-title";
-import Link from "@/components/link";
 import Video from "@/components/video";
 import { createMetadata } from "@/lib/metadata";
 import type { VideoObject } from "schema-dts";
@@ -52,13 +51,18 @@ const Page = () => {
 
       <p className="text-muted-foreground mx-4 mt-5 mb-0 text-center text-sm leading-relaxed">
         Video is property of{" "}
-        <Link href="https://web.archive.org/web/20070511004304/www.g4techtv.ca" className="font-bold">
+        <a
+          href="https://web.archive.org/web/20070511004304/www.g4techtv.ca"
+          target="_blank"
+          rel="noopener noreferrer"
+          className="font-bold"
+        >
           G4techTV Canada
-        </Link>{" "}
+        </a>{" "}
         &amp;{" "}
-        <Link href="https://leo.fm/" className="font-bold">
+        <a href="https://leo.fm/" target="_blank" rel="noopener noreferrer" className="font-bold">
           Leo Laporte
-        </Link>
+        </a>
         . &copy; 2007 G4 Media, Inc.
       </p>
     </>

app/not-found.tsx

@@ -1,6 +1,6 @@
 import Button from "@/components/ui/button";
 import Video from "@/components/video";
-import Link from "@/components/link";
+import Link from "next/link";
 import type { Metadata } from "next";
 
 export const metadata: Metadata = {

app/notes/[slug]/page.tsx

@@ -1,11 +1,12 @@
 import { env } from "@/lib/env";
 import { Suspense } from "react";
 import { cacheLife } from "next/cache";
+import Link from "next/link";
 import { JsonLd } from "react-schemaorg";
 import { formatDate, formatDateISO } from "@/lib/date";
 import { CalendarDaysIcon, TagIcon, SquarePenIcon, EyeIcon, MessagesSquareIcon } from "lucide-react";
-import Link from "@/components/link";
 import ViewCounter from "@/components/view-counter";
+import CommentCount from "@/components/comment-count";
 import Comments from "@/components/comments/comments";
 import CommentsSkeleton from "@/components/comments/comments-skeleton";
 import { getSlugs, getFrontMatter, POSTS_DIR } from "@/lib/posts";
@@ -13,7 +14,6 @@ import { createMetadata } from "@/lib/metadata";
 import siteConfig from "@/lib/config/site";
 import authorConfig from "@/lib/config/author";
 import { size as ogImageSize } from "./opengraph-image";
-import { getCommentCounts } from "@/lib/server/comments";
 import type { Metadata } from "next";
 import type { BlogPosting } from "schema-dts";
 
@@ -61,10 +61,7 @@ const getFormattedDates = async (date: string) => {
 
 const Page = async ({ params }: { params: Promise<{ slug: string }> }) => {
   const { slug } = await params;
-  const [frontmatter, commentCount] = await Promise.all([
-    getFrontMatter(slug),
-    getCommentCounts(`${POSTS_DIR}/${slug}`),
-  ]);
+  const frontmatter = await getFrontMatter(slug);
   const formattedDates = await getFormattedDates(frontmatter!.date);
 
   const { default: MDXContent } = await import(`../../../${POSTS_DIR}/${slug}/index.mdx`);
@@ -134,16 +131,19 @@ const Page = async ({ params }: { params: Promise<{ slug: string }> }) => {
 
         <Link
           href={`/${POSTS_DIR}/${frontmatter!.slug}#comments`}
-          title={`${Intl.NumberFormat(env.NEXT_PUBLIC_SITE_LOCALE).format(commentCount || 0)} ${commentCount === 1 ? "comment" : "comments"}`}
           className="text-foreground/70 flex flex-nowrap items-center gap-1.5 whitespace-nowrap hover:no-underline"
         >
           <MessagesSquareIcon className="inline size-3 shrink-0" aria-hidden="true" />
-          <span>{Intl.NumberFormat(env.NEXT_PUBLIC_SITE_LOCALE).format(commentCount || 0)}</span>
+          <Suspense fallback={<span className="motion-safe:animate-pulse">0</span>}>
+            <CommentCount slug={`${POSTS_DIR}/${frontmatter!.slug}`} />
+          </Suspense>
         </Link>
 
         <div className="flex min-w-14 flex-nowrap items-center gap-1.5 whitespace-nowrap">
           <EyeIcon className="inline size-3 shrink-0" aria-hidden="true" />
-          <ViewCounter slug={`${POSTS_DIR}/${frontmatter!.slug}`} />
+          <Suspense fallback={<span className="motion-safe:animate-pulse">0</span>}>
+            <ViewCounter slug={`${POSTS_DIR}/${frontmatter!.slug}`} />
+          </Suspense>
         </div>
       </div>
 

app/notes/page.tsx

@@ -1,7 +1,8 @@
 import { env } from "@/lib/env";
+import { Suspense } from "react";
 import { cacheLife } from "next/cache";
+import Link from "next/link";
 import { EyeIcon, MessagesSquareIcon } from "lucide-react";
-import Link from "@/components/link";
 import PageTitle from "@/components/layout/page-title";
 import { getFrontMatter, POSTS_DIR, type FrontMatter } from "@/lib/posts";
 import { createMetadata } from "@/lib/metadata";
@@ -19,8 +20,10 @@ export const metadata = createMetadata({
 // Hoist number formatter to avoid re-creating on every render
 const numberFormatter = new Intl.NumberFormat(env.NEXT_PUBLIC_SITE_LOCALE);
 
-// Non-async component for displaying stats (receives data as props)
-const PostStats = ({ views, comments, slug }: { views: number; comments: number; slug: string }) => {
+// Async component that fetches and displays stats for a single post
+const PostStats = async ({ slug }: { slug: string }) => {
+  const [views, comments] = await Promise.all([getViewCounts(slug), getCommentCounts(slug)]);
+
   return (
     <>
       {views > 0 && (
@@ -32,8 +35,7 @@ const PostStats = ({ views, comments, slug }: { views: number; comments: number;
 
       {comments > 0 && (
         <Link
-          href={`/${POSTS_DIR}/${slug}#comments`}
-          prefetch={false}
+          href={`/${slug}#comments`}
           title={`${numberFormatter.format(comments)} ${comments === 1 ? "comment" : "comments"}`}
           className="inline-flex hover:no-underline"
         >
@@ -64,11 +66,9 @@ const getFormattedPostDates = async (posts: FrontMatter[]) => {
   });
 };
 
-// Async component that fetches all stats once and renders the full page
+// Renders the posts list with static content, deferring stats to runtime via Suspense
 const PostsList = async () => {
-  // Fetch posts and stats in parallel (only once per page load)
-  // These functions are cached with "use cache", so they can complete during prerendering
-  const [posts, views, comments] = await Promise.all([getFrontMatter(), getViewCounts(), getCommentCounts()]);
+  const posts = await getFrontMatter();
 
   // Format dates in a cached function to avoid date-fns using new Date() during render
   const formattedPosts = await getFormattedPostDates(posts);
@@ -79,18 +79,11 @@ const PostsList = async () => {
       dateISO: string;
       dateTitle: string;
       dateDisplay: string;
-      views: number;
-      comments: number;
     })[];
   } = {};
 
   formattedPosts.forEach((post) => {
-    (postsByYear[post.year] || (postsByYear[post.year] = [])).push({
-      ...post,
-      // Include pre-fetched stats
-      views: views[`${POSTS_DIR}/${post.slug}`] || 0,
-      comments: comments[`${POSTS_DIR}/${post.slug}`] || 0,
-    });
+    (postsByYear[post.year] || (postsByYear[post.year] = [])).push(post);
   });
 
   const sections: React.ReactNode[] = [];
@@ -102,7 +95,7 @@ const PostsList = async () => {
           {year}
         </h2>
         <ul className="space-y-4">
-          {posts.map(({ slug, dateISO, dateTitle, dateDisplay, title, htmlTitle, views, comments }) => (
+          {posts.map(({ slug, dateISO, dateTitle, dateDisplay, title, htmlTitle }) => (
             <li className="flex text-base leading-relaxed" key={slug}>
               <span className="text-muted-foreground w-18 shrink-0 md:w-22">
                 <time dateTime={dateISO} title={dateTitle}>
@@ -113,13 +106,14 @@ const PostsList = async () => {
                 {/* htmlTitle is sanitized by rehypeSanitize in lib/posts.ts with strict allowlist: only code, em, strong tags */}
                 <Link
                   href={`/${POSTS_DIR}/${slug}`}
-                  prefetch={false}
                   dangerouslySetInnerHTML={{ __html: htmlTitle || title }}
                   className="underline-offset-4 hover:underline"
                   style={{ viewTransitionName: `note-title-${slug}` }}
                 />
 
-                <PostStats slug={slug} views={views} comments={comments} />
+                <Suspense>
+                  <PostStats slug={`${POSTS_DIR}/${slug}`} />
+                </Suspense>
               </div>
             </li>
           ))}

app/page.tsx

@@ -1,4 +1,4 @@
-import Link from "@/components/link";
+import Link from "next/link";
 import { LockIcon } from "lucide-react";
 
 const Page = () => {
@@ -27,32 +27,38 @@ const Page = () => {
 
       <p>
         Whenever possible, I also apply my experience in{" "}
-        <Link href="https://bugcrowd.com/jakejarvis" title="Jake Jarvis on Bugcrowd">
+        <a
+          href="https://bugcrowd.com/jakejarvis"
+          title="Jake Jarvis on Bugcrowd"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
           information security
-        </Link>{" "}
+        </a>{" "}
         and{" "}
-        <Link
+        <a
           href="https://github.com/jakejarvis?tab=repositories&q=github-actions&type=&language=&sort=stargazers"
           title='My repositories tagged with "github-actions" on GitHub'
+          target="_blank"
+          rel="noopener noreferrer"
         >
           devops
-        </Link>
+        </a>
         .
       </p>
 
       <p>
         I fell in love with{" "}
-        <Link href="/previously" prefetch={false} title="My Terrible, Horrible, No Good, Very Bad First Websites">
+        <Link href="/previously" title="My Terrible, Horrible, No Good, Very Bad First Websites">
           frontend web design
         </Link>{" "}
         and{" "}
-        <Link href="/notes/my-first-code" prefetch={false} title="Jake's Bulletin Board, circa 2003">
+        <Link href="/notes/my-first-code" title="Jake's Bulletin Board, circa 2003">
           backend coding
         </Link>{" "}
         when my only source of income was{" "}
         <Link
           href="/birthday"
-          prefetch={false}
           title="🎉 Cranky Birthday Boy on VHS Tape 📼"
           style={{
             cursor: `url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='30' style='font-size:24px'><text y='50%' transform='rotate(-70 0 0) translate(-20, 6)'>🪄</text></svg>") 5 5, auto`,
@@ -66,37 +72,46 @@ const Page = () => {
 
       <p>
         I&rsquo;m currently building{" "}
-        <Link href="https://domainstack.io" title="Domainstack: Domain intelligence made easy" className="font-medium">
+        <a
+          href="https://domainstack.io"
+          title="Domainstack: Domain intelligence made easy"
+          className="font-medium"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
           Domainstack
-        </Link>
+        </a>
         , a beautiful all-in-one domain name intelligence tool, and{" "}
-        <Link
+        <a
           href="https://snoozle.ai"
           title="Snoozle: AI-powered bedtime stories for children"
           className="font-medium"
+          target="_blank"
+          rel="noopener noreferrer"
         >
           Snoozle
-        </Link>
+        </a>
         , an AI-powered bedtime story generator.
       </p>
 
       <p className="mt-2 mb-0 text-sm leading-normal">
         You can find my work on{" "}
-        <Link href="https://github.com/jakejarvis" rel="me">
+        <a href="https://github.com/jakejarvis" target="_blank" rel="noopener noreferrer me">
           GitHub
-        </Link>{" "}
+        </a>{" "}
         and{" "}
-        <Link href="https://www.linkedin.com/in/jakejarvis/" rel="me">
+        <a href="https://www.linkedin.com/in/jakejarvis/" target="_blank" rel="noopener noreferrer me">
           LinkedIn
-        </Link>
+        </a>
         . I&rsquo;m always available to connect over{" "}
-        <Link href="/contact" prefetch={false} title="Send an email">
+        <Link href="/contact" title="Send an email">
           email
         </Link>{" "}
         <sup className="">
-          <Link
+          <a
             href="https://jrvs.io/pgp"
-            rel="pgpkey"
+            target="_blank"
+            rel="noopener pgpkey"
             title="Download my PGP key"
             className="not-prose text-muted-foreground hover:text-primary space-x-1 px-0.5 text-nowrap no-underline hover:no-underline"
           >
@@ -104,7 +119,7 @@ const Page = () => {
             <code className="text-[9px] leading-none tracking-wider text-wrap [word-spacing:-3px]">
               2B0C 9CF2 51E6 9A39
             </code>
-          </Link>
+          </a>
         </sup>{" "}
         as well.
       </p>

app/projects/page.tsx

@@ -4,7 +4,6 @@ import { notFound } from "next/navigation";
 import { GitForkIcon, StarIcon } from "lucide-react";
 import Skeleton from "@/components/ui/skeleton";
 import PageTitle from "@/components/layout/page-title";
-import Link from "@/components/link";
 import RelativeTime from "@/components/relative-time";
 import ActivityCalendar from "@/components/activity-calendar";
 import { GitHubIcon } from "@/components/icons";
@@ -35,12 +34,14 @@ const Page = async () => {
       <PageTitle canonical="/projects">Projects</PageTitle>
 
       <h2 className="my-3.5 text-xl font-medium">
-        <Link
+        <a
           href={`https://github.com/${env.NEXT_PUBLIC_GITHUB_USERNAME}`}
+          target="_blank"
+          rel="noopener noreferrer"
           className="text-secondary-foreground hover:no-underline"
         >
           Contribution activity
-        </Link>
+        </a>
       </h2>
 
       <Suspense fallback={<Skeleton className="h-40 w-full" />}>
@@ -54,21 +55,28 @@ const Page = async () => {
       </Suspense>
 
       <h2 className="my-3.5 text-xl font-medium">
-        <Link
+        <a
           href={`https://github.com/${env.NEXT_PUBLIC_GITHUB_USERNAME}?tab=repositories&sort=stargazers`}
+          target="_blank"
+          rel="noopener noreferrer"
           className="text-secondary-foreground hover:no-underline"
         >
           Popular repositories
-        </Link>
+        </a>
       </h2>
 
       {repos && repos.length > 0 ? (
         <div className="row-auto grid w-full grid-cols-none gap-4 md:grid-cols-2">
           {repos.map((repo) => (
             <div key={repo!.name} className="border-ring/30 h-fit space-y-1.5 rounded-2xl border-1 px-4 py-3 shadow-xs">
-              <Link href={repo!.url} className="inline-block text-base leading-relaxed font-semibold">
+              <a
+                href={repo!.url}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="inline-block text-base leading-relaxed font-semibold"
+              >
                 {repo!.name}
-              </Link>
+              </a>
 
               {repo!.description && <p className="text-foreground/85 text-sm leading-relaxed">{repo!.description}</p>}
 
@@ -86,25 +94,29 @@ const Page = async () => {
                 )}
 
                 {repo!.stargazerCount > 0 && (
-                  <Link
+                  <a
                     href={`${repo!.url}/stargazers`}
                     title={`${Intl.NumberFormat(env.NEXT_PUBLIC_SITE_LOCALE).format(repo!.stargazerCount)} ${repo!.stargazerCount === 1 ? "star" : "stars"}`}
+                    target="_blank"
+                    rel="noopener noreferrer"
                     className="text-muted-foreground hover:text-primary inline-flex flex-nowrap items-center gap-2 hover:no-underline"
                   >
                     <StarIcon className="inline-block size-4 shrink-0" />
                     <span>{Intl.NumberFormat(env.NEXT_PUBLIC_SITE_LOCALE).format(repo!.stargazerCount)}</span>
-                  </Link>
+                  </a>
                 )}
 
                 {repo!.forkCount > 0 && (
-                  <Link
+                  <a
                     href={`${repo!.url}/network/members`}
+                    target="_blank"
+                    rel="noopener noreferrer"
                     title={`${Intl.NumberFormat(env.NEXT_PUBLIC_SITE_LOCALE).format(repo!.forkCount)} ${repo!.forkCount === 1 ? "fork" : "forks"}`}
                     className="text-muted-foreground hover:text-primary inline-flex flex-nowrap items-center gap-2 hover:no-underline"
                   >
                     <GitForkIcon className="inline-block size-4" />
                     <span>{Intl.NumberFormat(env.NEXT_PUBLIC_SITE_LOCALE).format(repo!.forkCount)}</span>
-                  </Link>
+                  </a>
                 )}
 
                 <div className="text-muted-foreground whitespace-nowrap">
@@ -124,12 +136,14 @@ const Page = async () => {
 
       <p className="mt-6 mb-0 text-center text-base font-medium">
         <Button variant="secondary" asChild>
-          <Link
+          <a
             href={`https://github.com/${env.NEXT_PUBLIC_GITHUB_USERNAME}?tab=repositories&type=source&sort=stargazers`}
+            target="_blank"
+            rel="noopener noreferrer"
           >
             <GitHubIcon />
             <span className="leading-none">Show All…</span>
-          </Link>
+          </a>
         </Button>
       </p>
     </>