feat: use nextjs 13 links

components/Breadcrumb.tsx

@@ -8,11 +8,9 @@ const HomeCrumb = () => {
   const { t } = useTranslation()
 
   return (
-    <Link href="/">
+    <Link href="/" className="flex items-center">
-      <a className="flex items-center">
+      <FontAwesomeIcon className="h-3 w-3" icon={['far', 'flag']} />
-        <FontAwesomeIcon className="h-3 w-3" icon={['far', 'flag']} />
+      <span className="ml-2 font-medium">{t('Home')}</span>
-        <span className="ml-2 font-medium">{t('Home')}</span>
-      </a>
     </Link>
   )
 }
@@ -37,14 +35,11 @@ const Breadcrumb: React.FC<{ query?: ParsedUrlQuery }> = ({ query }) => {
                     .map(p => encodeURIComponent(p))
                     .join('/')}`}
                   passHref
+                  className={`ml-1 transition-all duration-75 hover:opacity-70 md:ml-3 ${
+                    i == 0 && 'pointer-events-none opacity-80'
+                  }`}
                 >
-                  <a
+                  {p}
-                    className={`ml-1 transition-all duration-75 hover:opacity-70 md:ml-3 ${
-                      i == 0 && 'pointer-events-none opacity-80'
-                    }`}
-                  >
-                    {p}
-                  </a>
                 </Link>
               </li>
             ))}

components/FolderGridLayout.tsx

@@ -176,9 +176,7 @@ const FolderGridLayout = ({
             </div>
 
             <Link href={getItemPath(c.name)} passHref>
-              <a>
+              <GridItem c={c} path={getItemPath(c.name)} />
-                <GridItem c={c} path={getItemPath(c.name)} />
-              </a>
             </Link>
           </div>
         ))}

components/FolderListLayout.tsx

@@ -96,10 +96,12 @@ const FolderListLayout = ({
           className="grid grid-cols-12 transition-all duration-100 hover:bg-gray-100 dark:hover:bg-gray-850"
           key={c.id}
         >
-          <Link href={`${path === '/' ? '' : path}/${encodeURIComponent(c.name)}`} passHref>
+          <Link
-            <a className="col-span-12 md:col-span-10">
+            href={`${path === '/' ? '' : path}/${encodeURIComponent(c.name)}`}
-              <FileListItem fileContent={c} />
+            passHref
-            </a>
+            className="col-span-12 md:col-span-10"
+          >
+            <FileListItem fileContent={c} />
           </Link>
 
           {c.folder ? (

components/Navbar.tsx

@@ -64,11 +64,9 @@ const Navbar = () => {
       <SearchModal searchOpen={searchOpen} setSearchOpen={setSearchOpen} />
 
       <div className="mx-auto flex w-full items-center justify-between space-x-4 px-4 py-1">
-        <Link href="/" passHref>
+        <Link href="/" passHref className="flex items-center space-x-2 py-2 hover:opacity-80 dark:text-white md:p-2">
-          <a className="flex items-center space-x-2 py-2 hover:opacity-80 dark:text-white md:p-2">
+          <Image src={siteConfig.icon} alt="icon" width="25" height="25" priority />
-            <Image src={siteConfig.icon} alt="icon" width="25" height="25" priority />
+          <span className="hidden font-bold sm:block">{siteConfig.title}</span>
-            <span className="hidden font-bold sm:block">{siteConfig.title}</span>
-          </a>
         </Link>
 
         <div className="flex flex-1 items-center space-x-4 text-gray-700 md:flex-initial">

components/SearchModal.tsx

@@ -90,24 +90,24 @@ function SearchResultItemTemplate({
   disabled: boolean
 }) {
   return (
-    <Link href={driveItemPath} passHref>
+    <Link
-      <a
+      href={driveItemPath}
-        className={`flex items-center space-x-4 border-b border-gray-400/30 px-4 py-1.5 hover:bg-gray-50 dark:hover:bg-gray-850 ${
+      passHref
-          disabled ? 'pointer-events-none cursor-not-allowed' : 'cursor-pointer'
+      className={`flex items-center space-x-4 border-b border-gray-400/30 px-4 py-1.5 hover:bg-gray-50 dark:hover:bg-gray-850 ${
-        }`}
+        disabled ? 'pointer-events-none cursor-not-allowed' : 'cursor-pointer'
-      >
+      }`}
-        <FontAwesomeIcon icon={driveItem.file ? getFileIcon(driveItem.name) : ['far', 'folder']} />
+    >
-        <div>
+      <FontAwesomeIcon icon={driveItem.file ? getFileIcon(driveItem.name) : ['far', 'folder']} />
-          <div className="text-sm font-medium leading-8">{driveItem.name}</div>
+      <div>
-          <div
+        <div className="text-sm font-medium leading-8">{driveItem.name}</div>
-            className={`overflow-hidden truncate font-mono text-xs opacity-60 ${
+        <div
-              itemDescription === 'Loading ...' && 'animate-pulse'
+          className={`overflow-hidden truncate font-mono text-xs opacity-60 ${
-            }`}
+            itemDescription === 'Loading ...' && 'animate-pulse'
-          >
+          }`}
-            {itemDescription}
+        >
-          </div>
+          {itemDescription}
         </div>
-      </a>
+      </div>
     </Link>
   )
 }

components/SwitchLang.tsx

@@ -9,8 +9,8 @@ import { useCookies, withCookies } from 'react-cookie'
 // https://headlessui.dev/react/menu#integrating-with-next-js
 const CustomLink = ({ href, children, as, locale, ...props }): JSX.Element => {
   return (
-    <Link href={href} as={as} locale={locale}>
+    <Link href={href} as={as} locale={locale} {...props}>
-      <a {...props}>{children}</a>
+      {children}
     </Link>
   )
 }