fix: disable prefetch to make navigation work

ref: https://github.com/vercel/next.js/issues/48642#issuecomment-1517125348

ui/app/(app)/about/page.tsx

@@ -2,7 +2,7 @@
 
 import { useEffect, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { useRouter } from 'next/navigation'
+import Link from 'next/link'
 import {
   ChevronLeftIcon,
   CheckCircleIcon,
@@ -20,7 +20,6 @@ type VersionStatus = 'loading' | 'latest' | 'outdated' | 'error'
 
 export default function AboutPage() {
   const { t } = useTranslation()
-  const router = useRouter()
   const { openExternal } = useAppStore()
 
   const [appVersion, setAppVersion] = useState<string>()
@@ -64,12 +63,13 @@ export default function AboutPage() {
           <div className='relative mx-auto max-w-xl'>
             {/* Header with back button */}
             <div className='mb-8 flex items-center'>
-              <button
-                onClick={() => router.push('/')}
+              <Link
+                href='/'
+                prefetch={false}
                 className='text-muted-foreground hover:bg-accent hover:text-foreground absolute -left-14 flex size-10 items-center justify-center rounded-full transition'
               >
                 <ChevronLeftIcon className='size-6' />
-              </button>
+              </Link>
               <h1 className='text-foreground text-2xl font-bold'>
                 {t('settings.about')}
               </h1>

ui/app/(app)/settings/page.tsx

@@ -3,7 +3,7 @@
 import { useEffect, useMemo, useState } from 'react'
 import { useTheme } from 'next-themes'
 import { useTranslation } from 'react-i18next'
-import { useRouter } from 'next/navigation'
+import Link from 'next/link'
 import {
   SunIcon,
   MoonIcon,
@@ -43,7 +43,6 @@ const THEME_OPTIONS = [
 export default function SettingsPage() {
   const { t, i18n } = useTranslation()
   const { theme, setTheme } = useTheme()
-  const router = useRouter()
   const locales = useMemo(
     () => Object.keys(i18n.options.resources || {}),
     [i18n.options.resources],
@@ -73,12 +72,13 @@ export default function SettingsPage() {
           <div className='relative mx-auto max-w-xl'>
             {/* Header with back button */}
             <div className='mb-8 flex items-center'>
-              <button
-                onClick={() => router.push('/')}
+              <Link
+                href='/'
+                prefetch={false}
                 className='text-muted-foreground hover:bg-accent hover:text-foreground absolute -left-14 flex size-10 items-center justify-center rounded-full transition'
               >
                 <ChevronLeftIcon className='size-6' />
-              </button>
+              </Link>
               <h1 className='text-foreground text-2xl font-bold'>
                 {t('settings.title')}
               </h1>
@@ -184,15 +184,16 @@ export default function SettingsPage() {
             <div className='border-border mb-8 border-t' />
 
             {/* About Link */}
-            <button
-              onClick={() => router.push('/about')}
+            <Link
+              href='/about'
+              prefetch={false}
               className='hover:bg-accent flex w-full items-center justify-between rounded-lg px-3 py-3 text-left transition'
             >
               <span className='text-foreground text-sm font-medium'>
                 {t('settings.about')}
               </span>
               <ChevronRightIcon className='text-muted-foreground size-5' />
-            </button>
+            </Link>
           </div>
         </div>
       </ScrollArea>

ui/components/MenuBar.tsx

@@ -1,7 +1,6 @@
 'use client'
 
-import { useEffect } from 'react'
-import { useRouter } from 'next/navigation'
+import Link from 'next/link'
 import { isTauri, isMacOS } from '@/lib/backend'
 import { useTranslation } from 'react-i18next'
 import { useAppStore } from '@/lib/store'
@@ -24,7 +23,6 @@ type MenuItem = {
 
 export function MenuBar() {
   const { t } = useTranslation()
-  const router = useRouter()
   const {
     openDocuments,
     openExternal,
@@ -35,12 +33,6 @@ export function MenuBar() {
     saveDocuments,
   } = useAppStore()
 
-  useEffect(() => {
-    // Prefetch pages for smoother navigation
-    router.prefetch('/settings')
-    router.prefetch('/about')
-  }, [router])
-
   const fileMenuItems: MenuItem[] = [
     { label: t('menu.openFile'), onSelect: openDocuments },
     { label: t('menu.save'), onSelect: saveDocuments },
@@ -122,11 +114,10 @@ export function MenuBar() {
               </MenubarItem>
             ))}
             <MenubarSeparator />
-            <MenubarItem
-              className='text-[13px]'
-              onSelect={() => router.push('/settings')}
-            >
-              {t('menu.settings')}
+            <MenubarItem className='text-[13px]' asChild>
+              <Link href='/settings' prefetch={false}>
+                {t('menu.settings')}
+              </Link>
             </MenubarItem>
           </MenubarContent>
         </MenubarMenu>
@@ -187,11 +178,10 @@ export function MenuBar() {
               </MenubarItem>
             ))}
             <MenubarSeparator />
-            <MenubarItem
-              className='text-[13px]'
-              onSelect={() => router.push('/about')}
-            >
-              {t('settings.about')}
+            <MenubarItem className='text-[13px]' asChild>
+              <Link href='/about' prefetch={false}>
+                {t('settings.about')}
+              </Link>
             </MenubarItem>
           </MenubarContent>
         </MenubarMenu>