From 32657bc1c2e4a6814d8284faad9aad77ca42881d Mon Sep 17 00:00:00 2001
From: ArshVermaGit <arshverma.dev@gmail.com>
Date: Mon, 1 Jun 2026 04:02:29 +0530
Subject: [PATCH] fix(navigation): replace a tags with Next.js Link components
 for SPA routing

---
 src/app/compare/[users]/page.tsx       | 13 +++++++------
 src/app/dashboard/settings/page.tsx    |  5 +++--
 src/app/u/[username]/page.tsx          | 17 +++++++++--------
 src/components/landing/LandingPage.tsx |  9 +++++----
 4 files changed, 24 insertions(+), 20 deletions(-)

diff --git a/src/app/compare/[users]/page.tsx b/src/app/compare/[users]/page.tsx
index 8d858947a..0ebe3509a 100644
--- a/src/app/compare/[users]/page.tsx
+++ b/src/app/compare/[users]/page.tsx
@@ -1,4 +1,5 @@
 import { Metadata } from "next";
+import Link from "next/link";
 import { Scale, Trophy } from "lucide-react";
 import Image from "next/image";
 import { normalizeGitHubUsername } from "@/lib/validate-github-username";
@@ -110,12 +111,12 @@ export default async function PublicProfileComparePage({
               Shareable comparison built only from publicly visible DevTrack stats.
             </p>
           </div>
-          <a
+          <Link
             href={`/u/${encodeURIComponent(rightProfile.username)}`}
             className="secondary-button inline-flex rounded-lg px-4 py-2 text-sm font-medium"
           >
             View profile
-          </a>
+          </Link>
         </div>
 
         <div className="grid grid-cols-1 gap-4 md:grid-cols-[1fr_auto_1fr] md:items-stretch">
@@ -201,9 +202,9 @@ function CompareUnavailable({
       <div className="surface-card max-w-md rounded-2xl p-8 text-center">
         <h1 className="mb-2 text-3xl font-bold">{title}</h1>
         <p className="mb-6 text-sm text-[var(--muted-foreground)]">{message}</p>
-        <a href="/" className="primary-button inline-block rounded-lg px-6 py-2">
+        <Link href="/" className="primary-button inline-block rounded-lg px-6 py-2">
           Back to Home
-        </a>
+        </Link>
       </div>
     </div>
   );
@@ -235,12 +236,12 @@ function ProfileHeader({
           className="h-14 w-14 rounded-full border border-[var(--border)]"
         />
         <div className="min-w-0">
-          <a
+          <Link
             href={`/u/${encodeURIComponent(profile.username)}`}
             className="truncate text-xl font-bold text-[var(--card-foreground)] hover:text-[var(--accent)]"
           >
             @{profile.username}
-          </a>
+          </Link>
           <p className="text-sm text-[var(--muted-foreground)]">
             {profile.streak.current} day streak - {profile.contributions.total} commits
           </p>
diff --git a/src/app/dashboard/settings/page.tsx b/src/app/dashboard/settings/page.tsx
index 1d4995b81..1887e9040 100644
--- a/src/app/dashboard/settings/page.tsx
+++ b/src/app/dashboard/settings/page.tsx
@@ -1196,12 +1196,13 @@ function SettingsPageContent() {
               </p>
             </div>
 
-            <a
+            <Link
               href="/api/auth/link-github"
+              prefetch={false}
               className="inline-flex items-center justify-center rounded-lg bg-[var(--accent)] px-4 py-2 text-sm font-medium text-[var(--accent-foreground)] hover:opacity-90 transition-opacity"
             >
               Add GitHub Account
-            </a>
+            </Link>
           </div>
 
           {removeError && (
diff --git a/src/app/u/[username]/page.tsx b/src/app/u/[username]/page.tsx
index 2a653574f..91f1e79db 100644
--- a/src/app/u/[username]/page.tsx
+++ b/src/app/u/[username]/page.tsx
@@ -1,6 +1,7 @@
 export const dynamic = "force-dynamic";
 
 import { Metadata } from "next";
+import Link from "next/link";
 import { redirect } from "next/navigation";
 import { getServerSession } from "next-auth";
 import BadgeSection from "@/components/BadgeSection";
@@ -98,20 +99,20 @@ export default async function PublicProfilePage({
           </p>
           <p className="text-sm text-[var(--muted-foreground)] mb-6">
             If this is your profile, go to{" "}
-            <a
+            <Link
               href="/dashboard/settings"
               className="text-[var(--accent)] underline hover:opacity-80"
             >
               Settings
-            </a>{" "}
+            </Link>{" "}
             and enable <strong>Public Profile</strong>.
           </p>
-          <a
+          <Link
             href="/"
             className="primary-button inline-block rounded-lg px-6 py-2"
           >
             Back to Home
-          </a>
+          </Link>
         </div>
       </div>
     );
@@ -149,20 +150,20 @@ export default async function PublicProfilePage({
             GitHub activity and coding stats
           </p>
           {compareHref && (
-            <a
+            <Link
               href={compareHref}
               className="primary-button mt-4 inline-flex rounded-lg px-4 py-2 text-sm font-semibold"
             >
               Compare with me
-            </a>
+            </Link>
           )}
           {!loggedInUsername && (
-            <a
+            <Link
               href={signInToCompareHref}
               className="secondary-button mt-4 inline-flex rounded-lg px-4 py-2 text-sm font-semibold"
             >
               Log in to compare
-            </a>
+            </Link>
           )}
         </div>
         {/* Download stats card button — client component */}
diff --git a/src/components/landing/LandingPage.tsx b/src/components/landing/LandingPage.tsx
index 0d07a799c..5a0735536 100644
--- a/src/components/landing/LandingPage.tsx
+++ b/src/components/landing/LandingPage.tsx
@@ -2,6 +2,7 @@
 
 import { useEffect, useRef, useState } from 'react';
 import Image from "next/image";
+import Link from 'next/link';
 
 /* ═══════════════════════════════════════════════════════════
    PUBLIC TYPES
@@ -422,7 +423,7 @@ function HeroSection() {
 
         {/* CTAs */}
         <div style={{ display: 'flex', gap: 16, flexWrap: 'wrap' }}>
-          <a href="/api/auth/signin/github?callbackUrl=/dashboard" className="lnd-cta-primary" style={{
+          <Link href="/api/auth/signin/github?callbackUrl=/dashboard" prefetch={false} className="lnd-cta-primary" style={{
             boxShadow: '0 8px 24px rgba(129,140,248,0.3)',
             transition: 'transform 0.3s, box-shadow 0.3s',
             transform: 'translateY(0)',
@@ -439,7 +440,7 @@ function HeroSection() {
               <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27s1.36.09 2 .27c1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z" />
             </svg>
             Sign in with GitHub
-          </a>
+          </Link>
           <a
             href="https://github.com/Priyanshu-byte-coder/devtrack"
             target="_blank"
@@ -719,9 +720,9 @@ function SetupSection() {
       </div>
 
       <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap', justifyContent: 'center' }}>
-        <a href="/api/auth/signin/github?callbackUrl=/dashboard" className="lnd-cta-primary">
+        <Link href="/api/auth/signin/github?callbackUrl=/dashboard" prefetch={false} className="lnd-cta-primary">
           Sign in with GitHub
-        </a>
+        </Link>
         <a
           href="https://github.com/Priyanshu-byte-coder/devtrack"
           target="_blank"