refactor: simplify next link component usage

.gitignore

@@ -34,3 +34,4 @@ yarn.lock
 
 # vercel
 .vercel
+.env*.local

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{" "}
+            <a href="mailto:jake@jarv.is">email me directly</a> or send me a direct message on{" "}
-            <Link href="https://bsky.app/profile/jarv.is" className="text-nowrap">
+            <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([
+  const frontmatter = await getFrontMatter(slug);
-    getFrontMatter(slug),
-    getCommentCounts(`${POSTS_DIR}/${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)
+// Async component that fetches and displays stats for a single post
-const PostStats = ({ views, comments, slug }: { views: number; comments: number; slug: string }) => {
+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`}
+          href={`/${slug}#comments`}
-          prefetch={false}
           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)
+  const posts = await getFrontMatter();
-  // These functions are cached with "use cache", so they can complete during prerendering
-  const [posts, views, comments] = await Promise.all([getFrontMatter(), getViewCounts(), getCommentCounts()]);
 
   // 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({
+    (postsByYear[post.year] || (postsByYear[post.year] = [])).push(post);
-      ...post,
-      // Include pre-fetched stats
-      views: views[`${POSTS_DIR}/${post.slug}`] || 0,
-      comments: comments[`${POSTS_DIR}/${post.slug}`] || 0,
-    });
   });
 
   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>
     </>

components/comment-count.tsx

@@ -0,0 +1,16 @@
+import { env } from "@/lib/env";
+import { getCommentCounts } from "@/lib/server/comments";
+
+const CommentCount = async ({ slug }: { slug: string }) => {
+  const count = await getCommentCounts(slug);
+
+  return (
+    <span
+      title={`${Intl.NumberFormat(env.NEXT_PUBLIC_SITE_LOCALE).format(count)} ${count === 1 ? "comment" : "comments"}`}
+    >
+      {Intl.NumberFormat(env.NEXT_PUBLIC_SITE_LOCALE).format(count)}
+    </span>
+  );
+};
+
+export default CommentCount;

components/comments/comment-form.tsx

@@ -7,7 +7,6 @@ import { InfoIcon, Loader2Icon } from "lucide-react";
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import Button from "@/components/ui/button";
 import Textarea from "@/components/ui/textarea";
-import Link from "@/components/link";
 import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
 import { MarkdownIcon } from "@/components/icons";
 import { useSession } from "@/lib/auth-client";
@@ -132,9 +131,9 @@ const CommentForm = ({
                         </li>
                         <li>
                           [
-                          <Link href="https://jarv.is" className="hover:no-underline">
+                          <a href="https://jarv.is" target="_blank" rel="noopener" className="hover:no-underline">
                             links
-                          </Link>
+                          </a>
                           ](https://jarv.is)
                         </li>
                         <li>
@@ -148,9 +147,13 @@ const CommentForm = ({
                       </ul>
 
                       <p className="text-sm leading-loose">
-                        <Link href="https://docs.github.com/en/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax">
+                        <a
+                          href="https://docs.github.com/en/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax"
+                          target="_blank"
+                          rel="noopener noreferrer"
+                        >
                           Learn more.
-                        </Link>
+                        </a>
                       </p>
                     </PopoverContent>
                   </Popover>

components/comments/comment-single.tsx

@@ -1,7 +1,7 @@
 import { getImageProps } from "next/image";
+import Link from "next/link";
 import Markdown from "react-markdown";
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
-import Link from "@/components/link";
 import RelativeTime from "@/components/relative-time";
 import Actions from "./comment-actions";
 import { remarkGfm, remarkSmartypants } from "@/lib/remark";
@@ -35,9 +35,14 @@ const CommentSingle = ({ comment }: { comment: CommentWithUser }) => {
 
         <div className="min-w-0 flex-1">
           <div className="mb-1 flex items-center gap-2">
-            <Link href={`https://github.com/${comment.user.name}`} className="font-medium hover:no-underline">
+            <a
+              href={`https://github.com/${comment.user.name}`}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="font-medium hover:no-underline"
+            >
               @{comment.user.name}
-            </Link>
+            </a>
             <Link href={`#${divId}`} className="text-muted-foreground text-xs leading-none hover:no-underline">
               <RelativeTime date={comment.createdAt} />
             </Link>

components/contact-form.tsx

@@ -4,7 +4,6 @@ import { useActionState, useState } from "react";
 import { useDebounce } from "react-use";
 import { SendIcon, Loader2Icon, CheckIcon, XIcon } from "lucide-react";
 import Form from "next/form";
-import Link from "@/components/link";
 import Input from "@/components/ui/input";
 import Textarea from "@/components/ui/textarea";
 import Button from "@/components/ui/button";
@@ -113,13 +112,19 @@ const ContactForm = () => {
 
         <div className="text-foreground/85 my-2 text-[0.8rem] leading-relaxed">
           <MarkdownIcon className="mr-1.5 inline-block size-4 align-text-top" /> Basic{" "}
-          <Link href="https://commonmark.org/help/" title="Markdown reference sheet" className="font-semibold">
+          <a
+            href="https://commonmark.org/help/"
+            target="_blank"
+            rel="noopener noreferrer"
+            title="Markdown reference sheet"
+            className="font-semibold"
+          >
             Markdown syntax
-          </Link>{" "}
+          </a>{" "}
           is allowed here, e.g.: <strong>**bold**</strong>, <em>_italics_</em>, [
-          <Link href="https://jarv.is" className="hover:no-underline">
+          <a href="https://jarv.is" target="_blank" rel="noopener" className="hover:no-underline">
             links
-          </Link>
+          </a>
           ](https://jarv.is), and <code>`code`</code>.
         </div>
       </div>
@@ -145,7 +150,7 @@ const ContactForm = () => {
           <div
             className={cn(
               "space-x-0.5 text-[0.9rem] font-semibold",
-              formState.success ? "text-success" : "text-destructive"
+              formState.success ? "text-green-600 dark:text-green-400" : "text-destructive"
             )}
           >
             {formState.success ? <CheckIcon className="inline size-4" /> : <XIcon className="inline size-4" />}{" "}

components/copy-button.tsx

@@ -2,20 +2,18 @@
 
 import * as React from "react";
 import copy from "copy-to-clipboard";
-import { CheckIcon, CopyIcon } from "lucide-react";
+import { CheckIcon, ClipboardCheckIcon, CopyIcon } from "lucide-react";
 import Button from "@/components/ui/button";
-import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
 import { cn } from "@/lib/utils";
+import { toast } from "sonner";
 
 function CopyButton({
   value,
   className,
   variant = "ghost",
-  tooltip = "Copy to Clipboard",
   ...props
 }: React.ComponentProps<typeof Button> & {
   value: string;
-  tooltip?: string;
 }) {
   const [hasCopied, setHasCopied] = React.useState(false);
   const timeoutRef = React.useRef<NodeJS.Timeout | undefined>(undefined);
@@ -29,8 +27,15 @@ function CopyButton({
   }, []);
 
   const handleCopy = () => {
+    if (hasCopied) return;
+
     copy(value);
     setHasCopied(true);
+    toast.success("Copied!", {
+      icon: <ClipboardCheckIcon className="text-foreground/85 size-4" aria-hidden="true" />,
+      duration: 2000,
+      id: "copy-button-toast-success",
+    });
 
     if (timeoutRef.current) {
       clearTimeout(timeoutRef.current);
@@ -39,26 +44,26 @@ function CopyButton({
   };
 
   return (
-    <Tooltip>
+    <Button
-      <TooltipTrigger asChild>
+      data-slot="copy-button"
-        <Button
+      data-copied={hasCopied}
-          data-slot="copy-button"
+      size="icon"
-          data-copied={hasCopied}
+      variant={variant}
-          size="icon"
+      className={cn(
-          variant={variant}
+        "bg-code hover:bg-accent dark:hover:bg-accent absolute top-3 right-2 z-10 size-7.5 hover:opacity-100 focus-visible:opacity-100",
-          className={cn(
+        hasCopied ? "cursor-default" : "cursor-pointer",
-            "bg-code absolute top-3 right-2 z-10 size-7 hover:opacity-100 focus-visible:opacity-100",
+        className
-            className
+      )}
-          )}
+      onClick={handleCopy}
-          onClick={handleCopy}
+      aria-label={hasCopied ? "Copied" : "Copy to clipboard"}
-          aria-label={hasCopied ? "Copied" : tooltip}
+      {...props}
-          {...props}
+    >
-        >
+      {hasCopied ? (
-          {hasCopied ? <CheckIcon aria-hidden="true" /> : <CopyIcon aria-hidden="true" />}
+        <CheckIcon className="text-green-600 dark:text-green-400" aria-hidden="true" />
-        </Button>
+      ) : (
-      </TooltipTrigger>
+        <CopyIcon aria-hidden="true" />
-      <TooltipContent>{hasCopied ? "Copied" : tooltip}</TooltipContent>
+      )}
-    </Tooltip>
+    </Button>
   );
 }
 

components/layout/footer.tsx

@@ -1,26 +1,24 @@
 import { env } from "@/lib/env";
-import Link from "@/components/link";
+import Link from "next/link";
 import siteConfig from "@/lib/config/site";
 
 const Footer = () => {
   return (
     <footer className="text-muted-foreground mt-8 w-full py-6 text-center text-[13px] leading-loose">
-      Content{" "}
+      Content <Link href="/license">licensed under {siteConfig.license}</Link>,{" "}
-      <Link href="/license" prefetch={false}>
+      <Link href="/previously" title="Previously on...">
-        licensed under {siteConfig.license}
-      </Link>
-      ,{" "}
-      <Link href="/previously" prefetch={false} title="Previously on...">
         {siteConfig.copyrightYearStart}
       </Link>{" "}
       – 2026.{" "}
-      <Link
+      <a
         href={`https://github.com/${env.NEXT_PUBLIC_GITHUB_REPO}`}
+        target="_blank"
+        rel="noopener noreferrer"
         title="View Source on GitHub"
         className="font-medium underline underline-offset-4"
       >
         View source.
-      </Link>
+      </a>
     </footer>
   );
 };

components/layout/header.tsx

@@ -3,7 +3,7 @@
 import { useState, useEffect } from "react";
 import { useTheme } from "next-themes";
 import Image from "next/image";
-import Link from "@/components/link";
+import Link from "next/link";
 import Button from "@/components/ui/button";
 import Separator from "@/components/ui/separator";
 import Menu from "@/components/layout/menu";
@@ -60,7 +60,9 @@ const Header = ({ className }: { className?: string }) => {
               quality={75}
               priority
             />
-            <span className="text-[17px] font-medium whitespace-nowrap max-md:sr-only">{siteConfig.name}</span>
+            <span className="text-[17.5px] font-medium tracking-tight whitespace-nowrap max-md:sr-only">
+              {siteConfig.name}
+            </span>
           </Link>
           <Separator orientation="vertical" className="!h-6" />
           <Menu />
@@ -68,9 +70,9 @@ const Header = ({ className }: { className?: string }) => {
 
         <div className="flex items-center gap-2">
           <Button variant="ghost" size="sm" aria-label="Open GitHub profile" asChild>
-            <Link href={`https://github.com/${authorConfig.social.github}`}>
+            <a href={`https://github.com/${authorConfig.social.github}`} target="_blank" rel="noopener noreferrer">
               <GitHubIcon />
-            </Link>
+            </a>
           </Button>
           <Button
             variant="ghost"

components/layout/menu.tsx

@@ -3,7 +3,7 @@
 import { useSelectedLayoutSegment } from "next/navigation";
 import { ChevronDownIcon } from "lucide-react";
 import Button from "@/components/ui/button";
-import Link from "@/components/link";
+import Link from "next/link";
 import {
   DropdownMenu,
   DropdownMenuTrigger,
@@ -49,9 +49,7 @@ const Menu = () => {
               data-current={isCurrent || undefined}
               className="data-current:bg-accent/60 data-current:text-accent-foreground"
             >
-              <Link href={item.href} prefetch={false}>
+              <Link href={item.href}>{item.text}</Link>
-                {item.text}
-              </Link>
             </Button>
           );
         })}
@@ -66,15 +64,8 @@ const Menu = () => {
           </Button>
         </DropdownMenuTrigger>
         <DropdownMenuContent align="start" className="min-w-[140px]">
-          <DropdownMenuItem asChild>
+          <DropdownMenuItem asChild data-current={segment === ""} aria-current={segment === "" ? "page" : undefined}>
-            <Link
+            <Link href="/">Home</Link>
-              href="/"
-              prefetch={false}
-              data-current={segment === ""}
-              aria-current={segment === "" ? "page" : undefined}
-            >
-              Home
-            </Link>
           </DropdownMenuItem>
           {menuItems.map((item, index) => {
             const isCurrent = item.href?.split("/")[1] === segment;
@@ -83,13 +74,10 @@ const Menu = () => {
               <DropdownMenuItem
                 asChild
                 key={index}
-                className="data-current:bg-accent/40 data-current:text-accent-foreground data-current:font-medium"
                 data-current={isCurrent || undefined}
                 aria-current={isCurrent ? "page" : undefined}
               >
-                <Link href={item.href} prefetch={false}>
+                <Link href={item.href}>{item.text}</Link>
-                  {item.text}
-                </Link>
               </DropdownMenuItem>
             );
           })}

components/layout/page-title.tsx

@@ -1,4 +1,4 @@
-import Link from "@/components/link";
+import Link from "next/link";
 import { cn } from "@/lib/utils";
 
 const PageTitle = ({

components/link.tsx

@@ -1,23 +0,0 @@
-import NextLink from "next/link";
-
-const Link = ({ href, rel, target, ...rest }: React.ComponentProps<typeof NextLink>) => {
-  // 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]);
-
-  const linkProps = {
-    href,
-    target: target || (isExternal ? "_blank" : undefined),
-    rel: `${rel ? `${rel} ` : ""}${target === "_blank" || isExternal ? "noopener noreferrer" : ""}`.trim() || undefined,
-    ...rest,
-  };
-
-  // don't waste time with next's component if it's just an external link
-  if (isExternal) {
-    return <a {...(linkProps as unknown as React.ComponentProps<"a">)} />;
-  }
-
-  return <NextLink {...linkProps} />;
-};
-
-export default Link;

components/third-party/gist.tsx

@@ -1,4 +1,3 @@
-import Link from "@/components/link";
 import { cn } from "@/lib/utils";
 
 const Gist = async ({
@@ -24,7 +23,13 @@ const Gist = async ({
     return (
       <p className="text-center">
         Failed to load gist.{" "}
-        <Link href={`https://gist.github.com/${id}${file ? `?file=${file}` : ""}`}>Try opening it manually?</Link>
+        <a
+          href={`https://gist.github.com/${id}${file ? `?file=${file}` : ""}`}
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          Try opening it manually?
+        </a>
       </p>
     );
   }

mdx-components.tsx

@@ -1,5 +1,5 @@
-import NextImage from "next/image";
+import Image from "next/image";
-import Link from "@/components/link";
+import Link from "next/link";
 import CodeBlock from "@/components/code-block";
 import Video from "@/components/video";
 import ImageDiff from "@/components/image-diff";
@@ -13,9 +13,15 @@ import type { MDXComponents } from "mdx/types";
 export const useMDXComponents = (components: MDXComponents): MDXComponents => {
   return {
     ...components,
-    a: Link,
+    a: ({ href, rel, target, ...rest }: React.ComponentProps<typeof Link>) => {
+      const isExternal = typeof href === "string" && !["/", "#"].includes(href[0]);
+      if (isExternal) {
+        return <a href={href} rel={rel || "noopener noreferrer"} target={target || "_blank"} {...rest} />;
+      }
+      return <Link href={href} rel={rel} target={target} {...rest} />;
+    },
     pre: CodeBlock,
-    img: ({ src, className, ...rest }) => {
+    img: ({ src, alt, className, ...rest }: React.ComponentProps<typeof Image>) => {
       const imageWidth = typeof src === "object" && "width" in src && src.width > 896 ? 896 : undefined;
       const imageHeight =
         imageWidth && typeof src === "object" && "width" in src && "height" in src
@@ -23,8 +29,9 @@ export const useMDXComponents = (components: MDXComponents): MDXComponents => {
           : undefined;
 
       return (
-        <NextImage
+        <Image
           src={src}
+          alt={alt}
           width={imageWidth}
           height={imageHeight}
           className={cn(