feat: use nextjs 13 links

components/Breadcrumb.tsx

@@ -8,11 +8,9 @@ const HomeCrumb = () => {
   const { t } = useTranslation()
 
   return (
-    <Link href="/">
-      <a className="flex items-center">
+    <Link href="/" className="flex items-center">
       <FontAwesomeIcon className="h-3 w-3" icon={['far', 'flag']} />
       <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
-                >
-                  <a
                   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)} />
-              </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>
-            <a className="col-span-12 md:col-span-10">
+          <Link
+            href={`${path === '/' ? '' : path}/${encodeURIComponent(c.name)}`}
+            passHref
+            className="col-span-12 md:col-span-10"
+          >
             <FileListItem fileContent={c} />
-            </a>
           </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>
-          <a className="flex items-center space-x-2 py-2 hover:opacity-80 dark:text-white md:p-2">
+        <Link href="/" passHref 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 />
           <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,8 +90,9 @@ function SearchResultItemTemplate({
   disabled: boolean
 }) {
   return (
-    <Link href={driveItemPath} passHref>
-      <a
+    <Link
+      href={driveItemPath}
+      passHref
       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'
       }`}
@@ -107,7 +108,6 @@ function SearchResultItemTemplate({
           {itemDescription}
         </div>
       </div>
-      </a>
     </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}>
-      <a {...props}>{children}</a>
+    <Link href={href} as={as} locale={locale} {...props}>
+      {children}
     </Link>
   )
 }