feat(mdx): Improve mdx links

Support client-side routing
thien-do · May 15, 2022 · 9a1ce76 · 9a1ce76 · vercel · May 15, 2022
1 parent a3babb1
commit 9a1ce76
Showing 1 changed file with 9 additions and 0 deletions.
diff --git a/lib/mdx/components.ts → lib/mdx/components.tsx b/lib/mdx/components.ts → lib/mdx/components.tsx
@@ -1,10 +1,19 @@
 import Head from "next/head";
 import { MDXComponents } from "mdx/types";
+import Link from "next/link";
+
+// To have client-side routing
+const CustomLink: MDXComponents["a"] = (props) => (
+	<Link href={props.href!}>
+		<a {...props} />
+	</Link>
+);
 
 /**
  * Use Next's components in MDX (e.g. Head)
  */
 export const mdxComponents: MDXComponents = {
+	a: CustomLink,
 	// https://github.com/mdx-js/mdx/discussions/1921
 	head: Head as any,
 };