Use custom link for MDX

pages/_app.tsx

@@ -1,15 +1,26 @@
-import React from "react";
+import React, { AnchorHTMLAttributes } from "react";
 import { AppProps } from "next/app";
 import { MDXProvider } from "@mdx-js/react";
 import { ThemeProvider } from "../components/theme";
 import { Navbar } from "../components/Navbar";
+import NextLink from "next/link";
 import "./_app.css";
 import "./font.css";
 
+function Link(props: AnchorHTMLAttributes<HTMLAnchorElement>) {
+  const { href, ...other } = props;
+
+  return (
+    <NextLink href={href ?? "#"}>
+      <a {...other}></a>
+    </NextLink>
+  );
+}
+
 export default function App({ Component, pageProps }: AppProps): JSX.Element {
   return (
     <ThemeProvider theme="light">
-      <MDXProvider components={{}}>
+      <MDXProvider components={{ a: Link }}>
         <Navbar />
         <Component {...pageProps} />
       </MDXProvider>