fix: navigate next13.x upgrade

components/Card.tsx

@@ -1,5 +1,5 @@
 import Image from './Image'
-import Link from './Link'
+import Link from 'next/link'
 
 const Card = ({ title, description, imgSrc, href }) => (
   <div className="md p-4 md:w-1/2" style={{ maxWidth: '544px' }}>

components/Footer.tsx

@@ -1,4 +1,4 @@
-import Link from './Link'
+import Link from 'next/link'
 import siteMetadata from '@/data/siteMetadata'
 import SocialIcon from '@/components/social-icons'
 

components/LayoutWrapper.tsx

@@ -1,6 +1,6 @@
 import Image from '@/components/Image'
 import headerNavLinks from '@/data/headerNavLinks'
-import Link from './Link'
+import Link from 'next/link'
 import SectionContainer from './SectionContainer'
 import Footer from './Footer'
 import MobileNav from './MobileNav'
@@ -17,8 +17,8 @@ const LayoutWrapper = ({ children }: Props) => {
         <Image
           src="/static/images/header-banner.jpg"
           alt="header banner"
-          width="1500px"
-          height="600px"
+          width="1500"
+          height="600"
         />
       </Link>
       <div className="flex h-screen flex-col justify-between">

components/Link.tsx

@@ -1,27 +0,0 @@
-/* eslint-disable jsx-a11y/anchor-has-content */
-import Link from 'next/link'
-import { AnchorHTMLAttributes, DetailedHTMLProps } from 'react'
-
-const CustomLink = ({
-  href,
-  ...rest
-}: DetailedHTMLProps<AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>) => {
-  const isInternalLink = href && href.startsWith('/')
-  const isAnchorLink = href && href.startsWith('#')
-
-  if (isInternalLink) {
-    return (
-      <Link href={href}>
-        <a {...rest} />
-      </Link>
-    )
-  }
-
-  if (isAnchorLink) {
-    return <a href={href} {...rest} />
-  }
-
-  return <a target="_blank" rel="noopener noreferrer" href={href} {...rest} />
-}
-
-export default CustomLink

components/MDXComponents.tsx

@@ -2,7 +2,6 @@
 import React, { useMemo } from 'react'
 import { ComponentMap, getMDXComponent } from 'mdx-bundler/client'
 import Image from './Image'
-import CustomLink from './Link'
 import TOCInline from './TOCInline'
 import Pre from './Pre'
 import { BlogNewsletterForm } from './NewsletterForm'
@@ -16,7 +15,6 @@ export const MDXComponents: ComponentMap = {
   Image,
   //@ts-ignore
   TOCInline,
-  a: CustomLink,
   pre: Pre,
   wrapper: Wrapper,
   //@ts-ignore

components/MobileNav.tsx

@@ -1,5 +1,5 @@
 import { useState } from 'react'
-import Link from './Link'
+import Link from 'next/link'
 import headerNavLinks from '@/data/headerNavLinks'
 
 const MobileNav = () => {
@@ -21,7 +21,7 @@ const MobileNav = () => {
     <div className="sm:hidden">
       <button
         type="button"
-        className="mt-2 ml-1 mr-1 h-8 w-8 rounded py-1"
+        className="ml-1 mr-1 mt-2 h-8 w-8 rounded py-1"
         aria-label="Toggle Menu"
         onClick={onToggleNav}
       >

components/Pagination.tsx

@@ -1,4 +1,4 @@
-import Link from '@/components/Link'
+import Link from 'next/link'
 
 interface Props {
   page: string
@@ -11,7 +11,7 @@ export default function Pagination({ page, totalPages, currentPage }: Props) {
   const nextPage = currentPage + 1 <= totalPages
 
   return (
-    <div className="space-y-2 pt-6 pb-8 md:space-y-5">
+    <div className="space-y-2 pb-8 pt-6 md:space-y-5">
       <nav className="flex justify-between">
         {!prevPage && (
           <button className="cursor-auto disabled:opacity-50" disabled={!prevPage}>

components/PhotoGallery.tsx

@@ -1,42 +1,38 @@
 import { useState } from 'react'
-import Lightbox from 'react-image-lightbox'
-import 'react-image-lightbox/style.css'
+import Lightbox from 'yet-another-react-lightbox'
+import 'yet-another-react-lightbox/styles.css'
 import Image from './Image'
 
 const PhotoGallery = (props) => {
   const { title, data } = props
   const [isOpen, setIsOpen] = useState(false)
   const [photoIndex, setPhotoIndex] = useState(0)
+  const slides = data.map((d) => {
+    return { src: d }
+  })
 
   return (
     <div className="grid grid-cols-4 gap-2 p-2">
       {data.length
         ? data.map((d: string, index: number) => (
-            <Image
-              key={d}
-              alt={title}
-              onClick={() => {
-                setPhotoIndex(index)
-                setIsOpen(true)
-              }}
-              src={d}
-              className="w-1/4 cursor-pointer object-cover"
-              width="300px"
-              height="300px"
-            />
+            <div className="relative flex h-24 flex-col items-center overflow-hidden" key={d}>
+              <Image
+                alt={title}
+                onClick={() => {
+                  setPhotoIndex(index)
+                  setIsOpen(true)
+                }}
+                src={d}
+                quality={75}
+                loading="lazy"
+                fill
+                style={{ objectFit: 'cover' }}
+                className="-mt-18 w-full max-w-none cursor-pointer"
+              />
+            </div>
           ))
         : null}
-
-      {isOpen && (
-        <Lightbox
-          mainSrc={data[photoIndex]}
-          nextSrc={data[(photoIndex + 1) % data.length]}
-          prevSrc={data[(photoIndex + data.length - 1) % data.length]}
-          onCloseRequest={() => setIsOpen(false)}
-          onMovePrevRequest={() => setPhotoIndex((photoIndex + data.length - 1) % data.length)}
-          onMoveNextRequest={() => setPhotoIndex((photoIndex + 1) % data.length)}
-        />
-      )}
+      <Lightbox index={photoIndex} open={isOpen} slides={slides} close={() => setIsOpen(false)} />
     </div>
   )
 }

components/Tag.tsx

@@ -7,10 +7,11 @@ interface Props {
 
 const Tag = ({ text }: Props) => {
   return (
-    <Link href={`/tags/${kebabCase(text)}`}>
-      <a className="mr-3 text-sm font-medium uppercase text-primary-500 hover:text-primary-600 dark:hover:text-primary-400">
-        {text.split(' ').join('-')}
-      </a>
+    <Link
+      className="mr-3 text-sm font-medium uppercase text-primary-500 hover:text-primary-600 dark:hover:text-primary-400"
+      href={`/tags/${kebabCase(text)}`}
+    >
+      {text.split(' ').join('-')}
     </Link>
   )
 }