Prevent Page Link being reloaded

components/NotionPage.tsx

@@ -1,7 +1,6 @@
 import * as React from 'react'
 import dynamic from 'next/dynamic'
 import Image from 'next/image'
-import Link from 'next/link'
 import { useRouter } from 'next/router'
 
 import cs from 'classnames'
@@ -27,6 +26,7 @@ import { Page404 } from './Page404'
 import { PageAside } from './PageAside'
 import { PageHead } from './PageHead'
 import styles from './styles.module.css'
+import PageLink from "@/components/PageLink";
 
 // -----------------------------------------------------------------------------
 // dynamic imports for optional components
@@ -154,7 +154,7 @@ export const NotionPage: React.FC<types.PageProps> = ({
   const components = React.useMemo(
     () => ({
       nextImage: Image,
-      nextLink: Link,
+      PageLink,
       Code,
       Collection,
       Equation,

components/PageLink.tsx

@@ -0,0 +1,20 @@
+import React, { FC } from 'react'
+import Link from 'next/link'
+
+type NextLinkProps = {
+  href: string
+  className?: string
+  children: React.ReactNode
+}
+
+const PageLink: FC<NextLinkProps> = ({ href, className, children }) => {
+  return (
+    <Link href={href} passHref>
+      <a className={className}>
+        {children}
+      </a>
+    </Link>
+  )
+}
+
+export default PageLink