switch to link component and fix seo canonical

layouts/ListLayout.js

@@ -1,6 +1,6 @@
 import { useState } from 'react'
-import Link from 'next/link'
 import tinytime from 'tinytime'
+import Link from '@/components/Link'
 import Tag from '@/components/Tag'
 
 const postDateTemplate = tinytime('{MMMM} {DD}, {YYYY}')
@@ -58,11 +58,11 @@ export default function ListLayout({ posts, title }) {
                   <div className="space-y-3 xl:col-span-3">
                     <div>
                       <h3 className="text-2xl leading-8 font-bold tracking-tight">
-                        <Link href={`/blog/${slug}`}>
-                          <a className="text-gray-900 dark:text-gray-100">{title}</a>
+                        <Link href={`/blog/${slug}`} className="text-gray-900 dark:text-gray-100">
+                          {title}
                         </Link>
                       </h3>
-                      <div className="space-x-2">
+                      <div className="space-x-3">
                         {tags.map((tag) => (
                           <Tag key={tag} text={tag} />
                         ))}

layouts/PostLayout.js

@@ -80,7 +80,7 @@ export default function PostLayout({ children, frontMatter, next, prev }) {
                 <h2 className="text-xs tracking-wide uppercase text-gray-500 dark:text-gray-400">
                   Tags
                 </h2>
-                <div className="space-x-2 xl:flex xl:flex-col xl:space-x-0">
+                <div className="space-x-3 xl:flex xl:flex-col xl:space-x-0">
                   {tags.map((tag) => (
                     <Tag key={tag} text={tag} />
                   ))}